Framework for entering time tickets BOD-183 BOD-185

client/src/components/tech-lookup-jobs-drawer/tech-lookup-jobs-drawer.component.jsx

@@ -1,6 +1,6 @@
 import { PrinterFilled } from "@ant-design/icons";
 import { useQuery } from "@apollo/react-hooks";
-import { Button, Col, Drawer, Grid, PageHeader, Row, Tag } from "antd";
+import { Button, Col, Drawer, Grid, PageHeader, Row, Tag, Tabs } from "antd";
 import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -12,6 +12,9 @@ import AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import OwnerTagPopoverComponent from "../owner-tag-popover/owner-tag-popover.component";
 import VehicleTagPopoverComponent from "../vehicle-tag-popover/vehicle-tag-popover.component";
+import JobLinesContainer from "../job-detail-lines/job-lines.container";
+import JobsDocumentsGalleryContainer from "../jobs-documents-gallery/jobs-documents-gallery.container";
+import JobNotesContainer from "../jobs-notes/jobs-notes.container";
 
 const mapDispatchToProps = (dispatch) => ({
   setPrintCenterContext: (context) =>
@@ -23,7 +26,7 @@ const colBreakPoints = {
     span: 24,
   },
   sm: {
-    span: 12,
+    span: 8,
   },
 };
 
@@ -115,10 +118,21 @@ export function JobDetailCards({ setPrintCenterContext }) {
           }
         >
           <Row gutter={[16, 16]}>
-            <Col {...colBreakPoints}></Col>
-            <Col {...colBreakPoints}></Col>
-            <Col {...colBreakPoints}></Col>
+            <Col {...colBreakPoints}> What would be good to have here?</Col>
+            <Col {...colBreakPoints}> What would be good to have here?</Col>
+            <Col {...colBreakPoints}> What would be good to have here?</Col>
           </Row>
+          <Tabs size="large">
+            <Tabs.TabPane key="lines" tab={t("jobs.labels.lines")}>
+              <JobLinesContainer jobId={searchParams.selected} />
+            </Tabs.TabPane>
+            <Tabs.TabPane key="documents" tab={t("jobs.labels.documents")}>
+              <JobsDocumentsGalleryContainer jobId={searchParams.selected} />
+            </Tabs.TabPane>
+            <Tabs.TabPane key="notes" tab={t("jobs.labels.notes")}>
+              <JobNotesContainer jobId={searchParams.selected} />
+            </Tabs.TabPane>
+          </Tabs>
         </PageHeader>
       ) : null}
     </Drawer>