diff --git a/client/src/components/job-close-ro-guard/job-close-ro-gaurd.labor.jsx b/client/src/components/job-close-ro-guard/job-close-ro-gaurd.labor.jsx
index e856bf240..51233e151 100644
--- a/client/src/components/job-close-ro-guard/job-close-ro-gaurd.labor.jsx
+++ b/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}
diff --git a/client/src/components/job-employee-assignments/job-employee-assignments.component.jsx b/client/src/components/job-employee-assignments/job-employee-assignments.component.jsx
index de00fa95a..d0b590cf1 100644
--- a/client/src/components/job-employee-assignments/job-employee-assignments.component.jsx
+++ b/client/src/components/job-employee-assignments/job-employee-assignments.component.jsx
@@ -13,9 +13,7 @@ const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   jobRO: selectJobReadOnly
 });
-const mapDispatchToProps = () => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
+const mapDispatchToProps = () => ({});
 
 const iconStyle = { marginLeft: ".3rem" };
 
@@ -31,163 +29,199 @@ export function JobEmployeeAssignments({
   loading
 }) {
   const { t } = useTranslation();
-  const [assignment, setAssignment] = useState({
-    operation: null,
-    employeeid: null
-  });
-  const [visibility, setVisibility] = useState(false);
 
-  const onChange = (value, option) => {
-    setAssignment({ ...assignment, employeeid: value, name: option.name });
+  // Which assignment popover is currently open: "body" | "prep" | "refinish" | "csr" | null
+  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 popContent = (
-    <Row gutter={[16, 16]}>
-      <Col span={24}>
-        <Select
-          id="employeeSelector"
-          showSearc={{
-            optionFilterProp: "children",
-            filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-          }}
-          style={{ width: 200 }}
-          onChange={onChange}
-        >
-          {bodyshop.employees
-            .filter((emp) => emp.active)
-            .map((emp) => (
-              <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}
-            onClick={() => {
-              handleAdd(assignment);
-              setVisibility(false);
+  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
+            style={{ width: 220 }}
+            options={employeeOptions}
+            value={selected.employeeid}
+            placeholder={t("employees.actions.select")}
+            allowClear
+            showSearch={{
+              optionFilterProp: "label"
             }}
-          >
-            {t("allocations.actions.assign")}
-          </Button>
-          <Button onClick={() => setVisibility(false)}>Close</Button>
-        </Space>
-      </Col>
-    </Row>
-  );
+            onChange={(value, option) => {
+              if (!value) {
+                setSelected({ employeeid: null, name: null });
+                return;
+              }
+              setSelected({ employeeid: value, name: option?.label || null });
+            }}
+          />
+        </Col>
+
+        <Col span={24}>
+          <Space wrap>
+            <Button
+              type="primary"
+              disabled={!selected.employeeid}
+              onClick={() => {
+                handleAdd({ operation, employeeid: selected.employeeid, name: selected.name });
+                close();
+              }}
+            >
+              {t("allocations.actions.assign")}
+            </Button>
+            <Button onClick={close}>Close</Button>
+          </Space>
+        </Col>
+      </Row>
+    );
+
+    return (
+      <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 (
-    <Popover destroyOnHidden content={popContent} open={visibility}>
-      <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")}
-              />
-            </div>
-          ) : (
-            <PlusCircleFilled
+    <Spin spinning={loading}>
+      <DataLabel label={t("jobs.fields.employee_body")}>
+        {body ? (
+          <div>
+            <span>{`${body.first_name || ""} ${body.last_name || ""}`}</span>
+            <DeleteFilled
               disabled={jobRO}
               style={iconStyle}
-              onClick={() => {
-                if (!jobRO) {
-                  setAssignment({ operation: "body" });
-                  setVisibility(true);
-                }
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (!jobRO) handleRemove("body");
               }}
             />
-          )}
-        </DataLabel>
-        <DataLabel label={t("jobs.fields.employee_prep")}>
-          {prep ? (
-            <div>
-              <span>{`${prep.first_name || ""} ${prep.last_name || ""}`}</span>
-              <DeleteFilled
-                disabled={jobRO}
-                style={iconStyle}
-                operation="prep"
-                onClick={() => !jobRO && handleRemove("prep")}
-              />
-            </div>
-          ) : (
-            <PlusCircleFilled
+          </div>
+        ) : (
+          renderAssigner("body")
+        )}
+      </DataLabel>
+
+      <DataLabel label={t("jobs.fields.employee_prep")}>
+        {prep ? (
+          <div>
+            <span>{`${prep.first_name || ""} ${prep.last_name || ""}`}</span>
+            <DeleteFilled
               disabled={jobRO}
               style={iconStyle}
-              onClick={() => {
-                if (!jobRO) {
-                  setAssignment({ operation: "prep" });
-                  setVisibility(true);
-                }
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (!jobRO) handleRemove("prep");
               }}
             />
-          )}
-        </DataLabel>
-        <DataLabel label={t("jobs.fields.employee_refinish")}>
-          {refinish ? (
-            <div>
-              <span>{`${refinish.first_name || ""} ${refinish.last_name || ""}`}</span>
-              <DeleteFilled
-                disabled={jobRO}
-                style={iconStyle}
-                operation="refinish"
-                onClick={() => !jobRO && handleRemove("refinish")}
-              />
-            </div>
-          ) : (
-            <PlusCircleFilled
+          </div>
+        ) : (
+          renderAssigner("prep")
+        )}
+      </DataLabel>
+
+      <DataLabel label={t("jobs.fields.employee_refinish")}>
+        {refinish ? (
+          <div>
+            <span>{`${refinish.first_name || ""} ${refinish.last_name || ""}`}</span>
+            <DeleteFilled
               disabled={jobRO}
               style={iconStyle}
-              onClick={() => {
-                if (!jobRO) {
-                  setAssignment({ operation: "refinish" });
-                  setVisibility(true);
-                }
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (!jobRO) handleRemove("refinish");
               }}
             />
-          )}
-        </DataLabel>
-        <DataLabel
-          label={t(
-            InstanceRenderManager({
-              imex: "jobs.fields.employee_csr",
-              rome: "jobs.fields.employee_csr_writer"
-            })
-          )}
-        >
-          {csr ? (
-            <div>
-              <span>{`${csr.first_name || ""} ${csr.last_name || ""}`}</span>
-              <DeleteFilled
-                disabled={jobRO}
-                style={iconStyle}
-                operation="csr"
-                onClick={() => !jobRO && handleRemove("csr")}
-              />
-            </div>
-          ) : (
-            <PlusCircleFilled
+          </div>
+        ) : (
+          renderAssigner("refinish")
+        )}
+      </DataLabel>
+
+      <DataLabel
+        label={t(
+          InstanceRenderManager({
+            imex: "jobs.fields.employee_csr",
+            rome: "jobs.fields.employee_csr_writer"
+          })
+        )}
+      >
+        {csr ? (
+          <div>
+            <span>{`${csr.first_name || ""} ${csr.last_name || ""}`}</span>
+            <DeleteFilled
               disabled={jobRO}
               style={iconStyle}
-              onClick={() => {
-                if (!jobRO) {
-                  setAssignment({ operation: "csr" });
-                  setVisibility(true);
-                }
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (!jobRO) handleRemove("csr");
               }}
             />
-          )}
-        </DataLabel>
-      </Spin>
-    </Popover>
+          </div>
+        ) : (
+          renderAssigner("csr")
+        )}
+      </DataLabel>
+    </Spin>
   );
 }
 
diff --git a/client/src/components/job-employee-assignments/job-employee-assignments.container.jsx b/client/src/components/job-employee-assignments/job-employee-assignments.container.jsx
index f9b1b1fd5..3957e1035 100644
--- a/client/src/components/job-employee-assignments/job-employee-assignments.container.jsx
+++ b/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({
-  //currentUser: selectCurrentUser
-});
+const mapStateToProps = createStructuredSelector({});
 const mapDispatchToProps = (dispatch) => ({
   insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
 });
@@ -26,55 +24,69 @@ 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;
 
-    const result = await updateJob({
-      variables: { jobId: job.id, job: { [empAssignment]: employeeid } }
-    });
-    if (refetch) refetch();
-
-    if (!result.errors) {
-      insertAuditTrail({
-        jobid: job.id,
-        operation: AuditTrailMapping.jobassignmentchange(operation, name),
-        type: "jobassignmentchange"
-      });
-    } else {
-      notification.error({
-        title: t("jobs.errors.assigning", {
-          message: JSON.stringify(result.errors)
-        })
-      });
-    }
-    setLoading(false);
-  };
-  const handleRemove = async (operation) => {
     setLoading(true);
-    logImEXEvent("job_unassign_employee", { operation });
+    try {
+      logImEXEvent("job_assign_employee", { operation });
 
-    let empAssignment = determineFieldName(operation);
-    const result = await updateJob({
-      variables: { jobId: job.id, job: { [empAssignment]: null } }
-    });
+      const result = await updateJob({
+        variables: { jobId: job.id, job: { [empAssignment]: employeeid } }
+      });
 
-    if (!result.errors) {
-      insertAuditTrail({
-        jobid: job.id,
-        operation: AuditTrailMapping.jobassignmentremoved(operation),
-        type: "jobassignmentremoved"
-      });
-    } else {
-      notification.error({
-        title: t("jobs.errors.assigning", {
-          message: JSON.stringify(result.errors)
-        })
-      });
+      if (typeof refetch === "function") await refetch();
+
+      if (!result.errors) {
+        insertAuditTrail({
+          jobid: job.id,
+          operation: AuditTrailMapping.jobassignmentchange(operation, name),
+          type: "jobassignmentchange"
+        });
+      } else {
+        notification.error({
+          title: t("jobs.errors.assigning", {
+            message: JSON.stringify(result.errors)
+          })
+        });
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleRemove = async (operation) => {
+    const empAssignment = determineFieldName(operation);
+    if (!job?.id || !empAssignment) return;
+
+    setLoading(true);
+    try {
+      logImEXEvent("job_unassign_employee", { 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,
+          operation: AuditTrailMapping.jobassignmentremoved(operation),
+          type: "jobassignmentremoved"
+        });
+      } else {
+        notification.error({
+          title: t("jobs.errors.assigning", {
+            message: JSON.stringify(result.errors)
+          })
+        });
+      }
+    } finally {
+      setLoading(false);
     }
-    setLoading(false);
   };
 
   return (
@@ -102,7 +114,6 @@ const determineFieldName = (operation) => {
       return "employee_csr";
     case "refinish":
       return "employee_refinish";
-
     default:
       return null;
   }
diff --git a/client/src/components/jobs-detail-labor/jobs-detail-labor.container.jsx b/client/src/components/jobs-detail-labor/jobs-detail-labor.container.jsx
index 95d2ca219..da751c755 100644
--- a/client/src/components/jobs-detail-labor/jobs-detail-labor.container.jsx
+++ b/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 },
-    skip: !jobId,
+    variables: { id },
+    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}
diff --git a/client/src/components/tech-job-clock-out-button/tech-job-clock-out-button.component.jsx b/client/src/components/tech-job-clock-out-button/tech-job-clock-out-button.component.jsx
index 25448c662..2baea1cdf 100644
--- a/client/src/components/tech-job-clock-out-button/tech-job-clock-out-button.component.jsx
+++ b/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, {
-    variables: {
-      id: jobId
-    },
-    skip: !jobId,
+  const id = jobId ?? null;
+
+  const { loading: queryLoading, data: lineTicketData } = useQuery(GET_LINE_TICKET_BY_PK, {
+    variables: { id },
+    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,9 +182,7 @@ export function TechClockOffButton({
 
                         if (value > costCenterDiff)
                           return Promise.reject(t("timetickets.validation.hoursenteredmorethanavailable"));
-                        else {
-                          return Promise.resolve();
-                        }
+                        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>
diff --git a/client/src/components/time-ticket-modal/time-ticket-modal.component.jsx b/client/src/components/time-ticket-modal/time-ticket-modal.component.jsx
index 9f7e5b8e4..3897d3674 100644
--- a/client/src/components/time-ticket-modal/time-ticket-modal.component.jsx
+++ b/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,49 +49,68 @@ 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 });
-  }, [lineTicketRefreshKey, watchedJobId, isOpen]);
+    loadLineTicketData({ variables: { id: watchedJobId } });
+  }, [lineTicketRefreshKey, isOpen, watchedJobId, loadLineTicketData]);
 
-  const CostCenterSelect = ({ emps, value, ...props }) => {
-    return (
-      <Select
-        value={value === "timetickets.labels.shift" ? t(value) : value}
-        {...props}
-        disabled={value === "timetickets.labels.shift" || disabled}
-      >
-        {emps &&
-          emps.rates.map((item) => (
-            <Select.Option key={item.cost_center} value={item.cost_center}>
-              {item.cost_center === "timetickets.labels.shift"
-                ? t(item.cost_center)
-                : bodyshop.cdk_dealerid ||
-                    bodyshop.pbs_serialnumber ||
-                    bodyshop.rr_dealerid ||
-                    Enhanced_Payroll.treatment === "on"
-                  ? t(`joblines.fields.lbr_types.${item.cost_center.toUpperCase()}`)
-                  : item.cost_center}
-            </Select.Option>
-          ))}
-      </Select>
-    );
-  };
+  const CostCenterSelect = ({ emps, value, ...props }) => (
+    <Select
+      value={value === "timetickets.labels.shift" ? t(value) : value}
+      {...props}
+      disabled={value === "timetickets.labels.shift" || disabled}
+    >
+      {emps &&
+        emps.rates.map((item) => (
+          <Select.Option key={item.cost_center} value={item.cost_center}>
+            {item.cost_center === "timetickets.labels.shift"
+              ? t(item.cost_center)
+              : bodyshop.cdk_dealerid ||
+                  bodyshop.pbs_serialnumber ||
+                  bodyshop.rr_dealerid ||
+                  Enhanced_Payroll.treatment === "on"
+                ? t(`joblines.fields.lbr_types.${item.cost_center.toUpperCase()}`)
+                : item.cost_center}
+          </Select.Option>
+        ))}
+    </Select>
+  );
 
-  const MemoInput = ({ value, ...props }) => {
-    return <Input value={value?.startsWith("timetickets.labels") ? t(value) : value} {...props} />;
-  };
+  const MemoInput = ({ 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")
-                  //message: t("general.validation.required"),
+                  required: form.getFieldValue("cost_center") !== "timetickets.labels.shift"
                 }
               ]}
             >
@@ -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 =
-              employeeAutoCompleteOptions && employeeAutoCompleteOptions.filter((e) => e.id === employeeId)[0];
+            const emps = employeeAutoCompleteOptions?.find((e) => e.id === employeeId);
 
             return (
               <Form.Item
                 name="cost_center"
                 label={t("timetickets.fields.cost_center")}
                 valuePropName="value"
-                rules={[
-                  {
-                    required: true
-                    //message: t("general.validation.required"),
-                  }
-                ]}
+                rules={[{ required: true }]}
               >
                 <CostCenterSelect emps={emps} />
               </Form.Item>
@@ -185,52 +198,46 @@ 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) {
-                        return Promise.resolve();
-                      }
-                      if (!value || getFieldValue("cost_center") === null || !lineTicketData) return Promise.resolve();
+            <Form.Item
+              label={t("timetickets.fields.productivehrs")}
+              name="productivehrs"
+              rules={[
+                ({ getFieldValue }) => ({
+                  validator(rule, value) {
+                    if (!bodyshop.tt_enforce_hours_for_tech_console) return Promise.resolve();
+                    if (!value || getFieldValue("cost_center") === null || !lineTicketData) return Promise.resolve();
 
-                      //Check the cost center,
-                      const totals = CalculateAllocationsTotals(
-                        bodyshop,
-                        lineTicketData.joblines,
-                        lineTicketData.timetickets,
-                        lineTicketData.jobs_by_pk.lbr_adjustments
-                      );
+                    const totals = CalculateAllocationsTotals(
+                      bodyshop,
+                      lineTicketData.joblines,
+                      lineTicketData.timetickets,
+                      lineTicketData.jobs_by_pk.lbr_adjustments
+                    );
 
-                      const fieldTypeToCheck = bodyshopHasDmsKey(bodyshop) ? "mod_lbr_ty" : "cost_center";
+                    const fieldTypeToCheck = bodyshopHasDmsKey(bodyshop) ? "mod_lbr_ty" : "cost_center";
 
-                      const costCenterDiff =
-                        Math.round(
-                          totals.find((total) => total[fieldTypeToCheck] === getFieldValue("cost_center"))?.difference *
-                            10
-                        ) / 10;
+                    const costCenterDiff =
+                      Math.round(
+                        (totals.find((total) => total[fieldTypeToCheck] === getFieldValue("cost_center"))?.difference ||
+                          0) * 10
+                      ) / 10;
 
-                      if (value > costCenterDiff)
-                        return Promise.reject(t("timetickets.validation.hoursenteredmorethanavailable"));
-                      else {
-                        return Promise.resolve();
-                      }
+                    if (value > costCenterDiff) {
+                      return Promise.reject(t("timetickets.validation.hoursenteredmorethanavailable"));
                     }
-                  }),
-                  {
-                    required: form.getFieldValue("cost_center") !== "timetickets.labels.shift"
-                    //message: t("general.validation.required"),
+                    return Promise.resolve();
                   }
-                ]}
-              >
-                <InputNumber precision={1} />
-              </Form.Item>
-            </>
+                }),
+                {
+                  required: form.getFieldValue("cost_center") !== "timetickets.labels.shift"
+                }
+              ]}
+            >
+              <InputNumber precision={1} />
+            </Form.Item>
           )}
         </Form.Item>
+
         <Form.Item
           dependencies={["productivehrs"]}
           label={t("timetickets.fields.actualhrs")}
@@ -240,71 +247,68 @@ 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"));
-                  else {
-                    return Promise.resolve();
+                  if (prodHrs < 0 && value !== 0) {
+                    return Promise.reject(t("timetickets.labels.zeroactualnegativeprod"));
                   }
-                } else {
-                  return Promise.resolve();
                 }
+                return Promise.resolve();
               }
             })
           ]}
         >
           <InputNumber min={0} precision={1} />
         </Form.Item>
-        {
-          <>
-            <Form.Item label={t("timetickets.fields.clockon")} name="clockon">
-              <FormDateTimePicker
-                minuteStep={5}
-                disabled={
-                  disabled ||
-                  !HasRbacAccess({
-                    bodyshop,
-                    authLevel,
-                    action: "timetickets:shiftedit"
-                  })
-                }
-              />
-            </Form.Item>
-            <Form.Item
-              label={t("timetickets.fields.clockoff")}
-              name="clockoff"
-              rules={[
-                ({ 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))
-                      return Promise.reject(t("timetickets.validation.clockoffmustbeafterclockon"));
-
-                    return Promise.resolve();
-                  }
+        <>
+          <Form.Item label={t("timetickets.fields.clockon")} name="clockon">
+            <FormDateTimePicker
+              minuteStep={5}
+              disabled={
+                disabled ||
+                !HasRbacAccess({
+                  bodyshop,
+                  authLevel,
+                  action: "timetickets:shiftedit"
                 })
-              ]}
-            >
-              <FormDateTimePicker
-                minuteStep={5}
-                disabled={
-                  disabled ||
-                  !HasRbacAccess({
-                    bodyshop,
-                    authLevel,
-                    action: "timetickets:shiftedit"
-                  })
+              }
+            />
+          </Form.Item>
+
+          <Form.Item
+            label={t("timetickets.fields.clockoff")}
+            name="clockoff"
+            rules={[
+              ({ getFieldValue }) => ({
+                validator(rule, value) {
+                  const clockon = getFieldValue("clockon");
+                  if (!value) return Promise.resolve();
+                  if (!clockon && value) return Promise.reject(t("timetickets.validation.clockoffwithoutclockon"));
+                  if (value?.isSameOrAfter && !value.isSameOrAfter(clockon)) {
+                    return Promise.reject(t("timetickets.validation.clockoffmustbeafterclockon"));
+                  }
+                  return Promise.resolve();
                 }
-              />
-            </Form.Item>
-          </>
-        }
+              })
+            ]}
+          >
+            <FormDateTimePicker
+              minuteStep={5}
+              disabled={
+                disabled ||
+                !HasRbacAccess({
+                  bodyshop,
+                  authLevel,
+                  action: "timetickets:shiftedit"
+                })
+              }
+            />
+          </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"
-                  //message: t("general.validation.required"),
+                  required: form.getFieldValue("cost_center") !== "timetickets.labels.shift"
                 }
               ]}
             >
@@ -323,15 +326,7 @@ export function TimeTicketModalComponent({
         </Form.Item>
       </LayoutFormRow>
 
-      <Form.Item dependencies={["jobid"]}>
-        {() => {
-          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>
+      <LaborAllocationContainer jobid={watchedJobId || null} loading={loading} lineTicketData={lineTicketData} />
     </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 />
       )}
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index 9ccdd0c0e..c3c562745 100644
--- a/client/src/translations/en_us/common.json
+++ b/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}}",
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index 0e4fa7aea..3737dcd90 100644
--- a/client/src/translations/es/common.json
+++ b/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}}",
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index 7b8a38072..b6708d7a6 100644
--- a/client/src/translations/fr/common.json
+++ b/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}}",