Added tab control for job detail page. No attached user story.

client/src/components/jobs-detail-header/jobs-detail-header.component.jsx

@@ -44,9 +44,9 @@ export default connect(
   const tombstoneTitle = (
     <div>
       <Avatar size="large" alt="Vehicle Image" src={CarImage} />
-      {`${t("jobs.fields.ro_number")} ${
-        job.ro_number ? job.ro_number : t("general.labels.na")
-      }`}
+      {job.ro_number
+        ? `${t("jobs.fields.ro_number")} ${job.ro_number}`
+        : `EST-${job.est_number}`}
     </div>
   );
 

client/src/pages/jobs-detail/jobs-detail.page.component.jsx

@@ -5,6 +5,7 @@ import Icon, {
   FileImageFilled,
   ToolFilled
 } from "@ant-design/icons";
+import { useHistory, useLocation } from "react-router-dom";
 import { Form, notification, Tabs } from "antd";
 import moment from "moment";
 import React, { lazy, Suspense } from "react";
@@ -82,11 +83,15 @@ export default function JobsDetailPage({
   handleSubmit,
   refetch,
   scheduleModalState,
-  updateJobStatus
+  updateJobStatus,
+  tab
 }) {
   const { t } = useTranslation();
   const [form] = Form.useForm();
+  const history = useHistory();
 
+  console.log("history, location", history);
+  // history.replace();
   const formItemLayout = {
     labelCol: {
       xs: { span: 12 },
@@ -166,7 +171,12 @@ export default function JobsDetailPage({
           scheduleModalState={scheduleModalState}
           updateJobStatus={updateJobStatus}
         />
-        <Tabs defaultActiveKey="claimdetail">
+        <Tabs
+          defaultActiveKey={history.location.search.substring(1) || null}
+          onChange={key =>
+            history.replace({ ...history.location, search: `?${key}` })
+          }
+        >
           <Tabs.TabPane
             tab={
               <span>
@@ -267,20 +277,17 @@ export default function JobsDetailPage({
             <JobNotesContainer jobId={job.id} />
           </Tabs.TabPane>
 
-
           <Tabs.TabPane
-          tab={
-            <span>
-              <Icon component={FaHistory} />
-              {t("jobs.labels.audit")}
-            </span>
-          }
-          key="audit"
-        >
-          <JobsDetailAuditContainer recordId={job.id }/>
-        </Tabs.TabPane>
-
-          
+            tab={
+              <span>
+                <Icon component={FaHistory} />
+                {t("jobs.labels.audit")}
+              </span>
+            }
+            key="audit"
+          >
+            <JobsDetailAuditContainer recordId={job.id} />
+          </Tabs.TabPane>
         </Tabs>
       </Form>
     </Suspense>

client/src/pages/jobs-detail/jobs-detail.page.container.jsx

@@ -13,7 +13,7 @@ import {
 import JobsDetailPage from "./jobs-detail.page.component";
 
 function JobsDetailPageContainer({ match }) {
-  const { jobId } = match.params;
+  const { jobId, tab } = match.params;
   const { t } = useTranslation();
 
   const scheduleModalState = useState(false);
@@ -62,6 +62,7 @@ function JobsDetailPageContainer({ match }) {
       refetch={refetch}
       scheduleModalState={scheduleModalState}
       updateJobStatus={updateJobStatus}
+      tab={tab}
     />
   ) : (
     <AlertComponent message={t("jobs.errors.noaccess")} type="error" />

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

@@ -81,11 +81,6 @@ export default function Manage({ match }) {
                 path={`${match.path}/jobs/:jobId`}
                 component={JobsDetailPage}
               />
-              <Route
-                exact
-                path={`${match.path}/jobs/:jobId/documents`}
-                component={JobsDocumentsPage}
-              />
               <Route
                 exact
                 path={`${match.path}/profile`}