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>
   );
 }