Merged in feature/IO-3499-React-19 (pull request #2840)

Feature/IO-3499 React 19

client/src/components/job-close-ro-guard/job-close-ro-gaurd.labor.jsx

@@ -16,11 +16,15 @@ const mapDispatchToProps = () => ({});
 export default connect(mapStateToProps, mapDispatchToProps)(JobCloseRoGuardLabor);
 
 export function JobCloseRoGuardLabor({ job, bodyshop, warningCallback }) {
+  const jobId = job?.id ?? null;
+
   const { loading, error, data, refetch } = useQuery(GET_LINE_TICKET_BY_PK, {
-    variables: { id: job.id },
+    variables: { id: jobId },
+    skip: !jobId,
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only"
   });
+
   const {
     treatments: { Enhanced_Payroll }
   } = useTreatmentsWithConfig({
@@ -29,12 +33,13 @@ export function JobCloseRoGuardLabor({ job, bodyshop, warningCallback }) {
     splitKey: bodyshop.imexshopid
   });
 
+  if (!jobId) return <LoadingSkeleton />;
   if (loading) return <LoadingSkeleton />;
   if (error) return <AlertComponent title={error.message} type="error" />;
 
   return Enhanced_Payroll.treatment === "on" ? (
     <PayrollLaborAllocationsTable
-      jobId={job.id}
+      jobId={jobId}
       timetickets={data ? data.timetickets : []}
       refetch={refetch}
       adjustments={data ? data.jobs_by_pk.lbr_adjustments : []}
@@ -43,7 +48,7 @@ export function JobCloseRoGuardLabor({ job, bodyshop, warningCallback }) {
     />
   ) : (
     <LaborAllocationsTableComponent
-      jobId={job.id}
+      jobId={jobId}
       joblines={data ? data.joblines : []}
       timetickets={data ? data.timetickets : []}
       refetch={refetch}

client/src/components/job-employee-assignments/job-employee-assignments.component.jsx

@@ -13,9 +13,7 @@ const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   jobRO: selectJobReadOnly
 });
-const mapDispatchToProps = () => ({
+const mapDispatchToProps = () => ({});
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
 
 const iconStyle = { marginLeft: ".3rem" };
 
@@ -31,82 +29,135 @@ export function JobEmployeeAssignments({
   loading
 }) {
   const { t } = useTranslation();
-  const [assignment, setAssignment] = useState({
-    operation: null,
-    employeeid: null
-  });
-  const [visibility, setVisibility] = useState(false);
 
-  const onChange = (value, option) => {
+  // Which assignment popover is currently open: "body" | "prep" | "refinish" | "csr" | null
-    setAssignment({ ...assignment, employeeid: value, name: option.name });
+  const [openOperation, setOpenOperation] = useState(null);
+
+  // Current selection inside the popover
+  const [selected, setSelected] = useState({ employeeid: null, name: null });
+
+  const employeeOptions = (bodyshop?.employees || [])
+    .filter((emp) => emp.active)
+    .map((emp) => ({
+      value: emp.id,
+      label: `${emp.first_name} ${emp.last_name}`
+    }));
+
+  const getPopupContainer = () => document.querySelector("#time-ticket-modal") || document.body;
+
+  const openFor = (operation) => {
+    if (jobRO) return;
+    setSelected({ employeeid: null, name: null });
+    setOpenOperation(operation);
   };
 
+  const close = () => {
+    setOpenOperation(null);
+    setSelected({ employeeid: null, name: null });
+  };
+
+  const renderAssigner = (operation) => {
+    if (jobRO) {
+      return <PlusCircleFilled disabled style={iconStyle} />;
+    }
+
     const popContent = (
       <Row gutter={[16, 16]}>
         <Col span={24}>
           <Select
-          id="employeeSelector"
+            style={{ width: 220 }}
-          showSearc={{
+            options={employeeOptions}
-            optionFilterProp: "children",
+            value={selected.employeeid}
-            filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            placeholder={t("employees.actions.select")}
+            allowClear
+            showSearch={{
+              optionFilterProp: "label"
             }}
-          style={{ width: 200 }}
+            onChange={(value, option) => {
-          onChange={onChange}
+              if (!value) {
-        >
+                setSelected({ employeeid: null, name: null });
-          {bodyshop.employees
+                return;
-            .filter((emp) => emp.active)
+              }
-            .map((emp) => (
+              setSelected({ employeeid: value, name: option?.label || null });
-              <Select.Option value={emp.id} key={emp.id} name={`${emp.first_name} ${emp.last_name}`}>
+            }}
-                {`${emp.first_name} ${emp.last_name}`}
+          />
-              </Select.Option>
-            ))}
-        </Select>
         </Col>
+
         <Col span={24}>
           <Space wrap>
             <Button
               type="primary"
-            disabled={!assignment.employeeid || jobRO}
+              disabled={!selected.employeeid}
               onClick={() => {
-              handleAdd(assignment);
+                handleAdd({ operation, employeeid: selected.employeeid, name: selected.name });
-              setVisibility(false);
+                close();
               }}
             >
               {t("allocations.actions.assign")}
             </Button>
-          <Button onClick={() => setVisibility(false)}>Close</Button>
+            <Button onClick={close}>Close</Button>
           </Space>
         </Col>
       </Row>
     );
 
     return (
-    <Popover destroyOnHidden content={popContent} open={visibility}>
+      <Popover
+        destroyOnHidden
+        trigger="click"
+        open={openOperation === operation}
+        onOpenChange={(open) => {
+          // Important: let Popover drive close on outside click
+          if (open) openFor(operation);
+          else close();
+        }}
+        content={popContent}
+        getPopupContainer={getPopupContainer}
+      >
+        <span
+          role="button"
+          tabIndex={0}
+          onClick={(e) => {
+            // Prevent the click from being re-interpreted as "outside"
+            e.preventDefault();
+            e.stopPropagation();
+            openFor(operation);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              openFor(operation);
+            }
+          }}
+          style={{ display: "inline-flex", alignItems: "center" }}
+        >
+          <PlusCircleFilled style={iconStyle} />
+        </span>
+      </Popover>
+    );
+  };
+
+  return (
     <Spin spinning={loading}>
       <DataLabel label={t("jobs.fields.employee_body")}>
         {body ? (
           <div>
             <span>{`${body.first_name || ""} ${body.last_name || ""}`}</span>
             <DeleteFilled
-                operation="body"
               disabled={jobRO}
               style={iconStyle}
-                onClick={() => !jobRO && handleRemove("body")}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (!jobRO) handleRemove("body");
+              }}
             />
           </div>
         ) : (
-            <PlusCircleFilled
+          renderAssigner("body")
-              disabled={jobRO}
-              style={iconStyle}
-              onClick={() => {
-                if (!jobRO) {
-                  setAssignment({ operation: "body" });
-                  setVisibility(true);
-                }
-              }}
-            />
         )}
       </DataLabel>
+
       <DataLabel label={t("jobs.fields.employee_prep")}>
         {prep ? (
           <div>
@@ -114,23 +165,18 @@ export function JobEmployeeAssignments({
             <DeleteFilled
               disabled={jobRO}
               style={iconStyle}
-                operation="prep"
+              onClick={(e) => {
-                onClick={() => !jobRO && handleRemove("prep")}
+                e.preventDefault();
+                e.stopPropagation();
+                if (!jobRO) handleRemove("prep");
+              }}
             />
           </div>
         ) : (
-            <PlusCircleFilled
+          renderAssigner("prep")
-              disabled={jobRO}
-              style={iconStyle}
-              onClick={() => {
-                if (!jobRO) {
-                  setAssignment({ operation: "prep" });
-                  setVisibility(true);
-                }
-              }}
-            />
         )}
       </DataLabel>
+
       <DataLabel label={t("jobs.fields.employee_refinish")}>
         {refinish ? (
           <div>
@@ -138,23 +184,18 @@ export function JobEmployeeAssignments({
             <DeleteFilled
               disabled={jobRO}
               style={iconStyle}
-                operation="refinish"
+              onClick={(e) => {
-                onClick={() => !jobRO && handleRemove("refinish")}
+                e.preventDefault();
+                e.stopPropagation();
+                if (!jobRO) handleRemove("refinish");
+              }}
             />
           </div>
         ) : (
-            <PlusCircleFilled
+          renderAssigner("refinish")
-              disabled={jobRO}
-              style={iconStyle}
-              onClick={() => {
-                if (!jobRO) {
-                  setAssignment({ operation: "refinish" });
-                  setVisibility(true);
-                }
-              }}
-            />
         )}
       </DataLabel>
+
       <DataLabel
         label={t(
           InstanceRenderManager({
@@ -169,25 +210,18 @@ export function JobEmployeeAssignments({
             <DeleteFilled
               disabled={jobRO}
               style={iconStyle}
-                operation="csr"
+              onClick={(e) => {
-                onClick={() => !jobRO && handleRemove("csr")}
+                e.preventDefault();
+                e.stopPropagation();
+                if (!jobRO) handleRemove("csr");
+              }}
             />
           </div>
         ) : (
-            <PlusCircleFilled
+          renderAssigner("csr")
-              disabled={jobRO}
-              style={iconStyle}
-              onClick={() => {
-                if (!jobRO) {
-                  setAssignment({ operation: "csr" });
-                  setVisibility(true);
-                }
-              }}
-            />
         )}
       </DataLabel>
     </Spin>
-    </Popover>
   );
 }
 

client/src/components/job-employee-assignments/job-employee-assignments.container.jsx

@@ -11,9 +11,7 @@ import { insertAuditTrail } from "../../redux/application/application.actions";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
-const mapStateToProps = createStructuredSelector({
+const mapStateToProps = createStructuredSelector({});
-  //currentUser: selectCurrentUser
-});
 const mapDispatchToProps = (dispatch) => ({
   insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
 });
@@ -26,16 +24,20 @@ export function JobEmployeeAssignmentsContainer({ job, refetch, insertAuditTrail
   const notification = useNotification();
 
   const handleAdd = async (assignment) => {
-    setLoading(true);
     const { operation, employeeid, name } = assignment;
-    logImEXEvent("job_assign_employee", { operation });
+    const empAssignment = determineFieldName(operation);
 
-    let empAssignment = determineFieldName(operation);
+    if (!job?.id || !empAssignment || !employeeid) return;
+
+    setLoading(true);
+    try {
+      logImEXEvent("job_assign_employee", { operation });
 
       const result = await updateJob({
         variables: { jobId: job.id, job: { [empAssignment]: employeeid } }
       });
-    if (refetch) refetch();
+
+      if (typeof refetch === "function") await refetch();
 
       if (!result.errors) {
         insertAuditTrail({
@@ -50,17 +52,25 @@ export function JobEmployeeAssignmentsContainer({ job, refetch, insertAuditTrail
           })
         });
       }
+    } finally {
       setLoading(false);
+    }
   };
+
   const handleRemove = async (operation) => {
+    const empAssignment = determineFieldName(operation);
+    if (!job?.id || !empAssignment) return;
+
     setLoading(true);
+    try {
       logImEXEvent("job_unassign_employee", { operation });
 
-    let empAssignment = determineFieldName(operation);
       const result = await updateJob({
         variables: { jobId: job.id, job: { [empAssignment]: null } }
       });
 
+      if (typeof refetch === "function") await refetch();
+
       if (!result.errors) {
         insertAuditTrail({
           jobid: job.id,
@@ -74,7 +84,9 @@ export function JobEmployeeAssignmentsContainer({ job, refetch, insertAuditTrail
           })
         });
       }
+    } finally {
       setLoading(false);
+    }
   };
 
   return (
@@ -102,7 +114,6 @@ const determineFieldName = (operation) => {
       return "employee_csr";
     case "refinish":
       return "employee_refinish";
-
     default:
       return null;
   }

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

@@ -4,9 +4,11 @@ import AlertComponent from "../alert/alert.component";
 import JobsDetailLaborComponent from "./jobs-detail-labor.component";
 
 export default function JobsDetailLaborContainer({ jobId, techConsole, job }) {
+  const id = jobId ?? null;
+
   const { loading, error, data, refetch } = useQuery(GET_LINE_TICKET_BY_PK, {
-    variables: { id: jobId },
+    variables: { id },
-    skip: !jobId,
+    skip: !id,
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only"
   });
@@ -16,7 +18,7 @@ export default function JobsDetailLaborContainer({ jobId, techConsole, job }) {
   return (
     <JobsDetailLaborComponent
       loading={loading}
-      jobId={jobId}
+      jobId={id}
       timetickets={data ? data.timetickets : []}
       joblines={data ? data.joblines : []}
       refetch={refetch}

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

@@ -37,6 +37,7 @@ export function TechClockOffButton({
   const [updateJobStatus] = useMutation(UPDATE_JOB_STATUS);
   const notification = useNotification();
   const [form] = Form.useForm();
+
   const {
     treatments: { Enhanced_Payroll }
   } = useTreatmentsWithConfig({
@@ -45,14 +46,15 @@ export function TechClockOffButton({
     splitKey: bodyshop.imexshopid
   });
 
-  const { queryLoading, data: lineTicketData } = useQuery(GET_LINE_TICKET_BY_PK, {
+  const id = jobId ?? null;
-    variables: {
+
-      id: jobId
+  const { loading: queryLoading, data: lineTicketData } = useQuery(GET_LINE_TICKET_BY_PK, {
-    },
+    variables: { id },
-    skip: !jobId,
+    skip: !id,
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only"
   });
+
   const { t } = useTranslation();
 
   const emps = bodyshop.employees.filter((e) => e.id === technician?.id)[0];
@@ -63,6 +65,7 @@ export function TechClockOffButton({
     const status = values.status;
     delete values.status;
     setLoading(true);
+
     const result = await updateTimeticket({
       variables: {
         timeticketId: timeTicketId,
@@ -95,10 +98,11 @@ export function TechClockOffButton({
         title: t("timetickets.successes.clockedout")
       });
     }
+
     if (!isShiftTicket) {
       const job_update_result = await updateJobStatus({
         variables: {
-          jobId: jobId,
+          jobId: id,
           status: status
         }
       });
@@ -115,6 +119,7 @@ export function TechClockOffButton({
         });
       }
     }
+
     setLoading(false);
     if (completedCallback) completedCallback();
   };
@@ -139,7 +144,6 @@ export function TechClockOffButton({
                   rules={[
                     {
                       required: true
-                      //message: t("general.validation.required"),
                     }
                   ]}
                 >
@@ -151,7 +155,6 @@ export function TechClockOffButton({
                   rules={[
                     {
                       required: true
-                      //message: t("general.validation.required"),
                     },
                     ({ getFieldValue }) => ({
                       validator(rule, value) {
@@ -179,10 +182,8 @@ export function TechClockOffButton({
 
                         if (value > costCenterDiff)
                           return Promise.reject(t("timetickets.validation.hoursenteredmorethanavailable"));
-                        else {
                         return Promise.resolve();
                       }
-                      }
                     })
                   ]}
                 >
@@ -190,13 +191,13 @@ export function TechClockOffButton({
                 </Form.Item>
               </div>
             ) : null}
+
             <Form.Item
               name="cost_center"
               label={t("timetickets.fields.cost_center")}
               rules={[
                 {
                   required: true
-                  //message: t("general.validation.required"),
                 }
               ]}
             >
@@ -228,7 +229,6 @@ export function TechClockOffButton({
                 rules={[
                   {
                     required: true
-                    //message: t("general.validation.required"),
                   }
                 ]}
               >
@@ -239,12 +239,15 @@ export function TechClockOffButton({
                 </Select>
               </Form.Item>
             )}
+
             <Button type="primary" htmlType="submit" loading={loading}>
               {t("general.actions.save")}
             </Button>
+
             <TechJobClockoutDelete completedCallback={completedCallback} timeTicketId={timeTicketId} />
+
             {!isShiftTicket && (
-              <LaborAllocationContainer jobid={jobId || null} loading={queryLoading} lineTicketData={lineTicketData} />
+              <LaborAllocationContainer jobid={id || null} loading={queryLoading} lineTicketData={lineTicketData} />
             )}
           </Space>
         </Form>

client/src/components/time-ticket-modal/time-ticket-modal.component.jsx

@@ -1,7 +1,7 @@
 import { useLazyQuery } from "@apollo/client/react";
 import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import { Card, Form, Input, InputNumber, Select, Space, Switch } from "antd";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -40,6 +40,7 @@ export function TimeTicketModalComponent({
   isOpen
 }) {
   const { t } = useTranslation();
+
   const {
     treatments: { Enhanced_Payroll }
   } = useTreatmentsWithConfig({
@@ -48,24 +49,44 @@ export function TimeTicketModalComponent({
     splitKey: bodyshop.imexshopid
   });
 
-  const [loadLineTicketData, { called, loading, data: lineTicketData }] = useLazyQuery(GET_LINE_TICKET_BY_PK, {
+  const [loadLineTicketData, { loading, data: lineTicketData }] = useLazyQuery(GET_LINE_TICKET_BY_PK, {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only"
   });
 
-  // Watch the jobid field so we can refetch the bottom section without relying on jobid changes
   const watchedJobId = Form.useWatch("jobid", form);
 
+  // Local mutable memory: dedupe jobid-driven fetches without re-rendering.
+  const lastFetchedJobIdRef = useRef(null);
+
+  // Reset + fetch when job changes (never during render)
+  useEffect(() => {
+    if (!isOpen) {
+      lastFetchedJobIdRef.current = null;
+      return;
+    }
+
+    if (!watchedJobId) {
+      lastFetchedJobIdRef.current = null;
+      return;
+    }
+
+    if (lastFetchedJobIdRef.current === watchedJobId) return;
+
+    lastFetchedJobIdRef.current = watchedJobId;
+    loadLineTicketData({ variables: { id: watchedJobId } });
+  }, [isOpen, watchedJobId, loadLineTicketData]);
+
+  // Force refresh (e.g., after Save / external refresh bump)
   useEffect(() => {
     if (!isOpen) return;
     if (!watchedJobId) return;
-    if (!lineTicketRefreshKey) return;
+    if (lineTicketRefreshKey === 0) return;
 
-    loadLineTicketData({ id: watchedJobId });
+    loadLineTicketData({ variables: { id: watchedJobId } });
-  }, [lineTicketRefreshKey, watchedJobId, isOpen]);
+  }, [lineTicketRefreshKey, isOpen, watchedJobId, loadLineTicketData]);
 
-  const CostCenterSelect = ({ emps, value, ...props }) => {
+  const CostCenterSelect = ({ emps, value, ...props }) => (
-    return (
     <Select
       value={value === "timetickets.labels.shift" ? t(value) : value}
       {...props}
@@ -86,11 +107,10 @@ export function TimeTicketModalComponent({
         ))}
     </Select>
   );
-  };
 
-  const MemoInput = ({ value, ...props }) => {
+  const MemoInput = ({ value, ...props }) => (
-    return <Input value={value?.startsWith("timetickets.labels") ? t(value) : value} {...props} />;
+    <Input value={value?.startsWith("timetickets.labels") ? t(value) : value} {...props} />
-  };
+  );
 
   return (
     <div>
@@ -102,8 +122,7 @@ export function TimeTicketModalComponent({
               label={t("timetickets.fields.ro_number")}
               rules={[
                 {
-                  required: !(form.getFieldValue("cost_center") === "timetickets.labels.shift")
+                  required: form.getFieldValue("cost_center") !== "timetickets.labels.shift"
-                  //message: t("general.validation.required"),
                 }
               ]}
             >
@@ -115,25 +134,25 @@ export function TimeTicketModalComponent({
             </Form.Item>
           )}
         </Form.Item>
+
         <Form.Item
           label={t("timetickets.fields.date")}
           name="date"
           rules={[
             {
               required: true
-              //message: t("general.validation.required"),
             }
           ]}
         >
           <DateTimePicker isDateOnly />
         </Form.Item>
+
         <Form.Item
           name="employeeid"
           label={t("timetickets.fields.employee")}
           rules={[
             {
               required: true
-              //message: t("general.validation.required"),
             }
           ]}
         >
@@ -141,29 +160,23 @@ export function TimeTicketModalComponent({
             disabled={employeeSelectDisabled || disabled}
             options={employeeAutoCompleteOptions}
             onSelect={(value) => {
-              const emps = employeeAutoCompleteOptions && employeeAutoCompleteOptions.filter((e) => e.id === value)[0];
+              const emps = employeeAutoCompleteOptions?.find((e) => e.id === value);
-
               form.setFieldsValue({ flat_rate: emps?.flat_rate });
             }}
           />
         </Form.Item>
+
         <Form.Item shouldUpdate={(prev, cur) => prev.employeeid !== cur.employeeid}>
           {() => {
             const employeeId = form.getFieldValue("employeeid");
-            const emps =
+            const emps = employeeAutoCompleteOptions?.find((e) => e.id === employeeId);
-              employeeAutoCompleteOptions && employeeAutoCompleteOptions.filter((e) => e.id === employeeId)[0];
 
             return (
               <Form.Item
                 name="cost_center"
                 label={t("timetickets.fields.cost_center")}
                 valuePropName="value"
-                rules={[
+                rules={[{ required: true }]}
-                  {
-                    required: true
-                    //message: t("general.validation.required"),
-                  }
-                ]}
               >
                 <CostCenterSelect emps={emps} />
               </Form.Item>
@@ -185,19 +198,15 @@ export function TimeTicketModalComponent({
       <LayoutFormRow>
         <Form.Item shouldUpdate>
           {() => (
-            <>
             <Form.Item
               label={t("timetickets.fields.productivehrs")}
               name="productivehrs"
               rules={[
                 ({ getFieldValue }) => ({
                   validator(rule, value) {
-                      if (!bodyshop.tt_enforce_hours_for_tech_console) {
+                    if (!bodyshop.tt_enforce_hours_for_tech_console) return Promise.resolve();
-                        return Promise.resolve();
-                      }
                     if (!value || getFieldValue("cost_center") === null || !lineTicketData) return Promise.resolve();
 
-                      //Check the cost center,
                     const totals = CalculateAllocationsTotals(
                       bodyshop,
                       lineTicketData.joblines,
@@ -209,28 +218,26 @@ export function TimeTicketModalComponent({
 
                     const costCenterDiff =
                       Math.round(
-                          totals.find((total) => total[fieldTypeToCheck] === getFieldValue("cost_center"))?.difference *
+                        (totals.find((total) => total[fieldTypeToCheck] === getFieldValue("cost_center"))?.difference ||
-                            10
+                          0) * 10
                       ) / 10;
 
-                      if (value > costCenterDiff)
+                    if (value > costCenterDiff) {
                       return Promise.reject(t("timetickets.validation.hoursenteredmorethanavailable"));
-                      else {
-                        return Promise.resolve();
                     }
+                    return Promise.resolve();
                   }
                 }),
                 {
                   required: form.getFieldValue("cost_center") !== "timetickets.labels.shift"
-                    //message: t("general.validation.required"),
                 }
               ]}
             >
               <InputNumber precision={1} />
             </Form.Item>
-            </>
           )}
         </Form.Item>
+
         <Form.Item
           dependencies={["productivehrs"]}
           label={t("timetickets.fields.actualhrs")}
@@ -240,20 +247,18 @@ export function TimeTicketModalComponent({
               async validator(rule, value) {
                 if (value) {
                   const prodHrs = getFieldValue("productivehrs");
-                  if (prodHrs < 0 && value !== 0) return Promise.reject(t("timetickets.labels.zeroactualnegativeprod"));
+                  if (prodHrs < 0 && value !== 0) {
-                  else {
+                    return Promise.reject(t("timetickets.labels.zeroactualnegativeprod"));
-                    return Promise.resolve();
                   }
-                } else {
-                  return Promise.resolve();
                 }
+                return Promise.resolve();
               }
             })
           ]}
         >
           <InputNumber min={0} precision={1} />
         </Form.Item>
-        {
+
         <>
           <Form.Item label={t("timetickets.fields.clockon")} name="clockon">
             <FormDateTimePicker
@@ -268,6 +273,7 @@ export function TimeTicketModalComponent({
               }
             />
           </Form.Item>
+
           <Form.Item
             label={t("timetickets.fields.clockoff")}
             name="clockoff"
@@ -275,13 +281,11 @@ export function TimeTicketModalComponent({
               ({ getFieldValue }) => ({
                 validator(rule, value) {
                   const clockon = getFieldValue("clockon");
-
                   if (!value) return Promise.resolve();
                   if (!clockon && value) return Promise.reject(t("timetickets.validation.clockoffwithoutclockon"));
-                    // TODO - Verify this exists
+                  if (value?.isSameOrAfter && !value.isSameOrAfter(clockon)) {
-                    if (value?.isSameOrAfter && !value.isSameOrAfter(clockon))
                     return Promise.reject(t("timetickets.validation.clockoffmustbeafterclockon"));
-
+                  }
                   return Promise.resolve();
                 }
               })
@@ -300,11 +304,11 @@ export function TimeTicketModalComponent({
             />
           </Form.Item>
         </>
-        }
 
         <Form.Item label={t("timetickets.fields.memo")} name="memo">
           <MemoInput />
         </Form.Item>
+
         <Form.Item shouldUpdate>
           {() => (
             <Form.Item
@@ -312,8 +316,7 @@ export function TimeTicketModalComponent({
               label={t("timetickets.fields.ciecacode")}
               rules={[
                 {
-                  required: !form.getFieldValue("cost_center") === "timetickets.labels.shift"
+                  required: form.getFieldValue("cost_center") !== "timetickets.labels.shift"
-                  //message: t("general.validation.required"),
                 }
               ]}
             >
@@ -323,15 +326,7 @@ export function TimeTicketModalComponent({
         </Form.Item>
       </LayoutFormRow>
 
-      <Form.Item dependencies={["jobid"]}>
+      <LaborAllocationContainer jobid={watchedJobId || null} loading={loading} lineTicketData={lineTicketData} />
-        {() => {
-          const jobid = form.getFieldValue("jobid");
-          if ((!called && jobid) || (jobid && lineTicketData?.jobs_by_pk?.id !== jobid && !loading)) {
-            loadLineTicketData({ id: jobid });
-          }
-          return <LaborAllocationContainer jobid={jobid || null} loading={loading} lineTicketData={lineTicketData} />;
-        }}
-      </Form.Item>
     </div>
   );
 }
@@ -341,17 +336,20 @@ export function LaborAllocationContainer({ jobid, loading, lineTicketData, hideT
   if (loading) return <LoadingSkeleton />;
   if (!lineTicketData) return null;
   if (!jobid) return null;
+
   return (
     <Space orientation="vertical" style={{ width: "100%" }}>
       <Card style={{ height: "100%" }} title={t("jobs.labels.employeeassignments")}>
         <JobEmployeeAssignmentsContainer job={lineTicketData.jobs_by_pk} />
       </Card>
+
       <LaborAllocationsTable
         jobId={jobid}
         joblines={lineTicketData.joblines}
         timetickets={lineTicketData.timetickets}
         adjustments={lineTicketData.jobs_by_pk.lbr_adjustments}
       />
+
       {!hideTimeTickets && (
         <TimeTicketList loading={loading} timetickets={jobid ? lineTicketData.timetickets : []} techConsole />
       )}

client/src/translations/en_us/common.json

@@ -1128,7 +1128,8 @@
       "actions": {
         "addvacation": "Add Vacation",
         "new": "New Employee",
-        "newrate": "New Rate"
+        "newrate": "New Rate",
+        "select": "Select Employee"
       },
       "errors": {
         "delete": "Error encountered while deleting employee. {{message}}",

client/src/translations/es/common.json

@@ -1128,7 +1128,8 @@
       "actions": {
         "addvacation": "",
         "new": "Nuevo empleado",
-        "newrate": ""
+        "newrate": "",
+        "select": ""
       },
       "errors": {
         "delete": "Se encontró un error al eliminar al empleado. {{message}}",

client/src/translations/fr/common.json

@@ -1128,7 +1128,8 @@
       "actions": {
         "addvacation": "",
         "new": "Nouvel employé",
-        "newrate": ""
+        "newrate": "",
+        "select": ""
       },
       "errors": {
         "delete": "Erreur rencontrée lors de la suppression de l'employé. {{message}}",