feature/IO-3499-React-19: Ticket Ticket Issues, Employee Select Issues

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 />
       )}