IO-3262 Tech Console Job Clock Out

Signed-off-by: Allan Carr <allan@imexsystems.ca>

client/src/components/tech-header/tech-header.component.jsx

@@ -16,7 +16,7 @@ const mapDispatchToProps = () => ({
 export function TechHeader({ technician }) {
   const { t } = useTranslation();
   return (
-    <Header style={{ textAlign: "center" }}>
+    <Header style={{ textAlign: "center", height: "auto", overflow: "visible" }}>
       <Typography.Title style={{ color: "#fff" }}>
         {technician
           ? t("tech.labels.loggedin", {

client/src/components/tech-job-clock-out-button/tech-job-clock-out-button.component.jsx

@@ -1,5 +1,5 @@
 import { useMutation, useQuery } from "@apollo/client";
-import { Button, Card, Col, Form, InputNumber, Popover, Row, Select } from "antd";
+import { Button, Card, Form, InputNumber, Popover, Select, Space } from "antd";
 import axios from "axios";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -124,8 +124,7 @@ export function TechClockOffButton({
             cost_center: isShiftTicket ? "timetickets.labels.shift" : technician ? technician.cost_center : null
           }}
         >
-          <Row gutter={[16, 16]}>
-            <Col span={!isShiftTicket ? 8 : 24}>
+          <Space direction="vertical">
             {!isShiftTicket ? (
               <div>
                 <Form.Item
@@ -155,7 +154,6 @@ export function TechClockOffButton({
                         }
                         if (!value || getFieldValue("cost_center") === null || !lineTicketData)
                           return Promise.resolve();
-
                         //Check the cost center,
                         const totals = CalculateAllocationsTotals(
                           bodyshop,
@@ -163,16 +161,13 @@ export function TechClockOffButton({
                           lineTicketData.timetickets,
                           lineTicketData.jobs_by_pk.lbr_adjustments
                         );
-
                         const fieldTypeToCheck =
                           bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber ? "mod_lbr_ty" : "cost_center";
-
                         const costCenterDiff =
                           Math.round(
                             totals.find((total) => total[fieldTypeToCheck] === getFieldValue("cost_center"))
                               ?.difference * 10
                           ) / 10;
-
                         if (value > costCenterDiff)
                           return Promise.reject(t("timetickets.validation.hoursenteredmorethanavailable"));
                         else {
@@ -213,7 +208,6 @@ export function TechClockOffButton({
                 )}
               </Select>
             </Form.Item>
-
             {isShiftTicket ? (
               <div></div>
             ) : (
@@ -239,24 +233,21 @@ export function TechClockOffButton({
               {t("general.actions.save")}
             </Button>
             <TechJobClockoutDelete completedCallback={completedCallback} timeTicketId={timeTicketId} />
-            </Col>
             {!isShiftTicket && (
-              <Col span={16}>
-                <LaborAllocationContainer
-                  jobid={jobId || null}
-                  loading={queryLoading}
-                  lineTicketData={lineTicketData}
-                />
-              </Col>
+              <LaborAllocationContainer jobid={jobId || null} loading={queryLoading} lineTicketData={lineTicketData} />
             )}
-          </Row>
+          </Space>
         </Form>
       </div>
     </Card>
   );
 
   return (
-    <Popover content={overlay} trigger="click">
+    <Popover 
+      content={<div style={{ maxHeight: "75vh", overflowY: "auto" }}>{overlay}</div>} 
+      trigger="click"
+      getPopupContainer={() => document.querySelector('#time-ticket-modal')}
+    >
       <Button loading={loading} {...otherBtnProps}>
         {t("timetickets.actions.clockout")}
       </Button>