Further UI Updates

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

@@ -1,10 +1,9 @@
+import { Col, Row } from "antd";
 import React from "react";
-import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import LaborAllocationsTableComponent from "../labor-allocations-table/labor-allocations-table.component";
-import TimeTicketEnterButton from "../time-ticket-enter-button/time-ticket-enter-button.component";
 import TimeTicketList from "../time-ticket-list/time-ticket-list.component";
 
 const mapStateToProps = createStructuredSelector({
@@ -13,6 +12,41 @@ const mapStateToProps = createStructuredSelector({
 
 export default connect(mapStateToProps, null)(JobsDetailLaborContainer);
 
+const ticketSpan = {
+  xs: {
+    span: 24,
+  },
+  sm: {
+    span: 24,
+  },
+  md: {
+    span: 24,
+  },
+  lg: {
+    span: 24,
+  },
+  xl: {
+    span: 16,
+  },
+};
+const adjSpan = {
+  xs: {
+    span: 24,
+  },
+  sm: {
+    span: 24,
+  },
+  md: {
+    span: 24,
+  },
+  lg: {
+    span: 24,
+  },
+  xl: {
+    span: 8,
+  },
+};
+
 export function JobsDetailLaborContainer({
   jobRO,
   jobId,
@@ -23,27 +57,26 @@ export function JobsDetailLaborContainer({
   techConsole,
   adjustments,
 }) {
-  const { t } = useTranslation();
   return (
-    <div>
-      {techConsole ? null : (
-        <TimeTicketEnterButton actions={{ refetch }} context={{ jobId: jobId }}>
-          {t("timetickets.actions.enter")}
-        </TimeTicketEnterButton>
-      )}
-      <LaborAllocationsTableComponent
-        jobId={jobId}
-        joblines={joblines}
-        timetickets={timetickets}
-        adjustments={adjustments}
-      />
-      <TimeTicketList
-        loading={loading}
-        timetickets={timetickets}
-        refetch={refetch}
-        techConsole={techConsole}
-        disabled={jobRO}
-      />
-    </div>
+    <Row gutter={[16, 16]}>
+      <Col {...ticketSpan}>
+        <TimeTicketList
+          loading={loading}
+          timetickets={timetickets}
+          refetch={refetch}
+          techConsole={techConsole}
+          disabled={jobRO}
+          jobId={jobId}
+        />
+      </Col>
+      <Col {...adjSpan}>
+        <LaborAllocationsTableComponent
+          jobId={jobId}
+          joblines={joblines}
+          timetickets={timetickets}
+          adjustments={adjustments}
+        />
+      </Col>
+    </Row>
   );
 }