Jobslines schema. Added phone number formatting.

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

@@ -4,7 +4,8 @@ import SpinComponent from "../../components/loading-spinner/loading-spinner.comp
 import AlertComponent from "../../components/alert/alert.component";
 import JobTombstone from "../../components/job-tombstone/job-tombstone.component";
 import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
-import { Breadcrumb } from "antd";
+import { Tabs, Icon, Row } from "antd";
+import JobLinesContainer from "../../components/job-lines/job-lines.container.component";
 
 function JobsDetailPage({ match }) {
   const { jobId } = match.params;
@@ -17,7 +18,46 @@ function JobsDetailPage({ match }) {
 
   return (
     <div>
-      <JobTombstone job={data.jobs_by_pk} />
+      <Row>
+        <JobTombstone job={data.jobs_by_pk} />
+      </Row>
+      <Row>
+        <Tabs defaultActiveKey="lines">
+          <Tabs.TabPane
+            tab={
+              <span>
+                <Icon type="bars" />
+                Lines
+              </span>
+            }
+            key="lines"
+          >
+            <JobLinesContainer match={match} />
+          </Tabs.TabPane>
+          <Tabs.TabPane
+            tab={
+              <span>
+                <Icon type="dollar" />
+                Rates
+              </span>
+            }
+            key="rates"
+          >
+            Estimate Rates
+          </Tabs.TabPane>
+          <Tabs.TabPane
+            tab={
+              <span>
+                <Icon type="tool1" />
+                Parts
+              </span>
+            }
+            key="parts"
+          >
+            Estimate Parts
+          </Tabs.TabPane>
+        </Tabs>
+      </Row>
     </div>
   );
 }

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

@@ -8,7 +8,7 @@ import JobsDetailPage from "../jobs-detail/jobs-detail.page";
 import HeaderContainer from "../../components/header/header.container";
 import FooterComponent from "../../components/footer/footer.component";
 
-import { Layout, BackTop } from "antd";
+import { Layout, BackTop, Col } from "antd";
 
 const { Header, Content, Footer } = Layout;
 //This page will handle all routing for the entire application.
@@ -20,10 +20,15 @@ export default function Manage({ match }) {
       </Header>
 
       <Content>
-        <Route exact path={`${match.path}`} component={WhiteBoardPage} />
+        <Col span={22} offset={1}>
+          <Route exact path={`${match.path}`} component={WhiteBoardPage} />
 
-        <Route exact path={`${match.path}/jobs`} component={JobsPage} />
-        <Route path={`${match.path}/jobs/:jobId`} component={JobsDetailPage} />
+          <Route exact path={`${match.path}/jobs`} component={JobsPage} />
+          <Route
+            path={`${match.path}/jobs/:jobId`}
+            component={JobsDetailPage}
+          />
+        </Col>
       </Content>
 
       <Footer>