387 lines
12 KiB
JavaScript
387 lines
12 KiB
JavaScript
import { useLazyQuery } from "@apollo/client/react";
|
|
import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
|
|
import { Card, Form, Input, InputNumber, Select, Space, Switch } from "antd";
|
|
import { useEffect, useRef } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { GET_LINE_TICKET_BY_PK } from "../../graphql/jobs-lines.queries";
|
|
import { selectAuthLevel, selectBodyshop } from "../../redux/user/user.selectors";
|
|
import EmployeeSearchSelect from "../employee-search-select/employee-search-select.component";
|
|
import {
|
|
default as DateTimePicker,
|
|
default as FormDateTimePicker
|
|
} from "../form-date-time-picker/form-date-time-picker.component";
|
|
import JobSearchSelect from "../job-search-select/job-search-select.component";
|
|
import LaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.component";
|
|
import { CalculateAllocationsTotals } from "../labor-allocations-table/labor-allocations-table.utility";
|
|
import { bodyshopHasDmsKey } from "../../utils/dmsUtils.js";
|
|
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
|
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
|
|
import { HasRbacAccess } from "../rbac-wrapper/rbac-wrapper.component";
|
|
import TimeTicketList from "../time-ticket-list/time-ticket-list.component";
|
|
import JobEmployeeAssignmentsContainer from "./../job-employee-assignments/job-employee-assignments.container";
|
|
import { PayrollLaborAllocationsTable } from "../labor-allocations-table/labor-allocations-table.payroll.component.jsx";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
bodyshop: selectBodyshop,
|
|
authLevel: selectAuthLevel
|
|
});
|
|
const mapDispatchToProps = () => ({});
|
|
export default connect(mapStateToProps, mapDispatchToProps)(TimeTicketModalComponent);
|
|
|
|
export function TimeTicketModalComponent({
|
|
form,
|
|
bodyshop,
|
|
authLevel,
|
|
employeeAutoCompleteOptions,
|
|
disabled,
|
|
employeeSelectDisabled,
|
|
lineTicketRefreshKey,
|
|
isOpen
|
|
}) {
|
|
const { t } = useTranslation();
|
|
|
|
const {
|
|
treatments: { Enhanced_Payroll }
|
|
} = useTreatmentsWithConfig({
|
|
attributes: {},
|
|
names: ["Enhanced_Payroll"],
|
|
splitKey: bodyshop?.imexshopid
|
|
});
|
|
|
|
const [loadLineTicketData, { loading, data: lineTicketData, refetch }] = useLazyQuery(GET_LINE_TICKET_BY_PK, {
|
|
fetchPolicy: "network-only",
|
|
nextFetchPolicy: "network-only"
|
|
});
|
|
|
|
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 === 0) return;
|
|
|
|
loadLineTicketData({ variables: { id: watchedJobId } });
|
|
}, [lineTicketRefreshKey, isOpen, watchedJobId, loadLineTicketData]);
|
|
|
|
const CostCenterSelect = ({ emps, value, ...props }) => (
|
|
<Select
|
|
value={value === "timetickets.labels.shift" ? t(value) : value}
|
|
{...props}
|
|
disabled={value === "timetickets.labels.shift" || disabled}
|
|
options={
|
|
emps &&
|
|
emps.rates.map((item) => ({
|
|
value: item.cost_center,
|
|
label:
|
|
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
|
|
}))
|
|
}
|
|
/>
|
|
);
|
|
|
|
const MemoInput = ({ value, ...props }) => (
|
|
<Input value={value?.startsWith("timetickets.labels") ? t(value) : value} {...props} />
|
|
);
|
|
|
|
return (
|
|
<div>
|
|
<LayoutFormRow grow noDivider>
|
|
<Form.Item shouldUpdate>
|
|
{() => (
|
|
<Form.Item
|
|
name="jobid"
|
|
label={t("timetickets.fields.ro_number")}
|
|
rules={[
|
|
{
|
|
required: form.getFieldValue("cost_center") !== "timetickets.labels.shift"
|
|
}
|
|
]}
|
|
>
|
|
<JobSearchSelect
|
|
convertedOnly={true}
|
|
notExported={!bodyshop.tt_allow_post_to_invoiced}
|
|
notInvoiced={!bodyshop.tt_allow_post_to_invoiced}
|
|
/>
|
|
</Form.Item>
|
|
)}
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
label={t("timetickets.fields.date")}
|
|
name="date"
|
|
rules={[
|
|
{
|
|
required: true
|
|
}
|
|
]}
|
|
>
|
|
<DateTimePicker isDateOnly />
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
name="employeeid"
|
|
label={t("timetickets.fields.employee")}
|
|
rules={[
|
|
{
|
|
required: true
|
|
}
|
|
]}
|
|
>
|
|
<EmployeeSearchSelect
|
|
disabled={employeeSelectDisabled || disabled}
|
|
options={employeeAutoCompleteOptions}
|
|
onSelect={(value) => {
|
|
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?.find((e) => e.id === employeeId);
|
|
|
|
return (
|
|
<Form.Item
|
|
name="cost_center"
|
|
label={t("timetickets.fields.cost_center")}
|
|
valuePropName="value"
|
|
rules={[{ required: true }]}
|
|
>
|
|
<CostCenterSelect emps={emps} />
|
|
</Form.Item>
|
|
);
|
|
}}
|
|
</Form.Item>
|
|
|
|
<Form.Item name="flat_rate" label={t("timetickets.fields.flat_rate")} valuePropName="checked" hidden>
|
|
<Switch />
|
|
</Form.Item>
|
|
</LayoutFormRow>
|
|
|
|
<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();
|
|
|
|
const totals = CalculateAllocationsTotals(
|
|
bodyshop,
|
|
lineTicketData.joblines,
|
|
lineTicketData.timetickets,
|
|
lineTicketData.jobs_by_pk.lbr_adjustments
|
|
);
|
|
|
|
const fieldTypeToCheck = bodyshopHasDmsKey(bodyshop) ? "mod_lbr_ty" : "cost_center";
|
|
|
|
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"));
|
|
}
|
|
return Promise.resolve();
|
|
}
|
|
}),
|
|
{
|
|
required: form.getFieldValue("cost_center") !== "timetickets.labels.shift"
|
|
}
|
|
]}
|
|
>
|
|
<InputNumber precision={1} />
|
|
</Form.Item>
|
|
)}
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
dependencies={["productivehrs"]}
|
|
label={t("timetickets.fields.actualhrs")}
|
|
name="actualhrs"
|
|
rules={[
|
|
({ getFieldValue }) => ({
|
|
async validator(rule, value) {
|
|
if (value) {
|
|
const prodHrs = getFieldValue("productivehrs");
|
|
if (prodHrs < 0 && value !== 0) {
|
|
return Promise.reject(t("timetickets.labels.zeroactualnegativeprod"));
|
|
}
|
|
}
|
|
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"));
|
|
if (value?.isSameOrAfter && !value.isSameOrAfter(clockon)) {
|
|
return Promise.reject(t("timetickets.validation.clockoffmustbeafterclockon"));
|
|
}
|
|
return Promise.resolve();
|
|
}
|
|
})
|
|
]}
|
|
>
|
|
<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
|
|
name="ciecacode"
|
|
label={t("timetickets.fields.ciecacode")}
|
|
rules={[
|
|
{
|
|
required: form.getFieldValue("cost_center") !== "timetickets.labels.shift"
|
|
}
|
|
]}
|
|
>
|
|
<Input disabled />
|
|
</Form.Item>
|
|
)}
|
|
</Form.Item>
|
|
</LayoutFormRow>
|
|
|
|
<LaborAllocationContainer
|
|
jobid={watchedJobId || null}
|
|
loading={loading}
|
|
lineTicketData={lineTicketData}
|
|
bodyshop={bodyshop}
|
|
refetch={refetch}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function LaborAllocationContainer({
|
|
jobid,
|
|
loading,
|
|
lineTicketData,
|
|
hideTimeTickets = false,
|
|
bodyshop,
|
|
refetch
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const {
|
|
treatments: { Enhanced_Payroll }
|
|
} = useTreatmentsWithConfig({
|
|
attributes: {},
|
|
names: ["Enhanced_Payroll"],
|
|
splitKey: bodyshop?.imexshopid
|
|
});
|
|
|
|
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>
|
|
|
|
{Enhanced_Payroll.treatment === "on" ? (
|
|
<PayrollLaborAllocationsTable
|
|
jobId={jobid}
|
|
joblines={lineTicketData.joblines}
|
|
timetickets={lineTicketData.timetickets}
|
|
adjustments={lineTicketData.jobs_by_pk.lbr_adjustments}
|
|
refetch={refetch}
|
|
bodyshop={bodyshop}
|
|
/>
|
|
) : (
|
|
<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 />
|
|
)}
|
|
</Space>
|
|
);
|
|
}
|