|
|
|
|
@@ -30,11 +30,205 @@ const getContrastYIQ = (bgColor) =>
|
|
|
|
|
|
|
|
|
|
const findEmployeeById = (employees, id) => employees.find((e) => e.id === id);
|
|
|
|
|
|
|
|
|
|
const EllipsesToolTip = React.memo(({ title, children }) => (
|
|
|
|
|
<Tooltip title={title}>
|
|
|
|
|
<div className="ellipses">{children}</div>
|
|
|
|
|
</Tooltip>
|
|
|
|
|
));
|
|
|
|
|
const EllipsesToolTip = React.memo(({ title, children, kiosk }) => {
|
|
|
|
|
if (kiosk) {
|
|
|
|
|
return <div className="ellipses no-select">{children}</div>;
|
|
|
|
|
}
|
|
|
|
|
return (
|
|
|
|
|
<Tooltip title={title}>
|
|
|
|
|
<div className="ellipses">{children}</div>
|
|
|
|
|
</Tooltip>
|
|
|
|
|
);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const OwnerNameToolTip = ({ metadata, cardSettings }) =>
|
|
|
|
|
cardSettings?.ownr_nm && (
|
|
|
|
|
<Col span={24}>
|
|
|
|
|
<EllipsesToolTip title={<OwnerNameDisplay ownerObject={metadata} />} kiosk={cardSettings.kiosk}>
|
|
|
|
|
{metadata.ownr_ln || metadata.ownr_co_nm ? (
|
|
|
|
|
cardSettings.compact ? (
|
|
|
|
|
`${metadata.ownr_ln || ""} ${metadata.ownr_co_nm || ""}`
|
|
|
|
|
) : (
|
|
|
|
|
<OwnerNameDisplay ownerObject={metadata} />
|
|
|
|
|
)
|
|
|
|
|
) : (
|
|
|
|
|
<span> </span>
|
|
|
|
|
)}
|
|
|
|
|
</EllipsesToolTip>
|
|
|
|
|
</Col>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const ModelInfoToolTip = ({ metadata, cardSettings }) =>
|
|
|
|
|
cardSettings?.model_info && (
|
|
|
|
|
<Col span={24}>
|
|
|
|
|
<EllipsesToolTip
|
|
|
|
|
title={`${metadata.v_model_yr || ""} ${metadata.v_make_desc || ""} ${metadata.v_model_desc || ""}`}
|
|
|
|
|
kiosk={cardSettings.kiosk}
|
|
|
|
|
>
|
|
|
|
|
{metadata.v_model_yr || metadata.v_make_desc || metadata.v_model_desc ? (
|
|
|
|
|
`${metadata.v_model_yr || ""} ${metadata.v_make_desc || ""} ${metadata.v_model_desc || ""}`
|
|
|
|
|
) : (
|
|
|
|
|
<span> </span>
|
|
|
|
|
)}
|
|
|
|
|
</EllipsesToolTip>
|
|
|
|
|
</Col>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const InsuranceCompanyToolTip = ({ metadata, cardSettings }) =>
|
|
|
|
|
cardSettings?.ins_co_nm && (
|
|
|
|
|
<Col span={cardSettings.compact ? 24 : 12}>
|
|
|
|
|
<EllipsesToolTip title={metadata.ins_co_nm || ""} kiosk={cardSettings.kiosk}>
|
|
|
|
|
{metadata.ins_co_nm ? metadata.ins_co_nm : <span> </span>}
|
|
|
|
|
</EllipsesToolTip>
|
|
|
|
|
</Col>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const ClaimNumberToolTip = ({ metadata, cardSettings }) =>
|
|
|
|
|
cardSettings?.clm_no && (
|
|
|
|
|
<Col span={cardSettings.compact ? 24 : 12}>
|
|
|
|
|
<EllipsesToolTip title={metadata.clm_no || ""} kiosk={cardSettings.kiosk}>
|
|
|
|
|
{metadata.clm_no ? metadata.clm_no : <span> </span>}
|
|
|
|
|
</EllipsesToolTip>
|
|
|
|
|
</Col>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const EmployeeAssignmentsToolTip = ({
|
|
|
|
|
metadata,
|
|
|
|
|
cardSettings,
|
|
|
|
|
employee_body,
|
|
|
|
|
employee_prep,
|
|
|
|
|
employee_refinish,
|
|
|
|
|
employee_csr
|
|
|
|
|
}) =>
|
|
|
|
|
cardSettings?.employeeassignments && (
|
|
|
|
|
<Col span={24}>
|
|
|
|
|
<Row>
|
|
|
|
|
<Col span={cardSettings.compact ? 24 : 12}>
|
|
|
|
|
<EllipsesToolTip
|
|
|
|
|
title={`B: ${employee_body ? `${employee_body.first_name.substring(0, 3)} ${employee_body.last_name.charAt(0)}` : ""} ${metadata.labhrs.aggregate.sum.mod_lb_hrs || "?"}h`}
|
|
|
|
|
kiosk={cardSettings.kiosk}
|
|
|
|
|
>
|
|
|
|
|
{employee_body || metadata.labhrs.aggregate.sum.mod_lb_hrs ? (
|
|
|
|
|
`B: ${employee_body ? `${employee_body.first_name.substring(0, 3)} ${employee_body.last_name.charAt(0)}` : ""} ${metadata.labhrs.aggregate.sum.mod_lb_hrs || "?"}h`
|
|
|
|
|
) : (
|
|
|
|
|
<span> </span>
|
|
|
|
|
)}
|
|
|
|
|
</EllipsesToolTip>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col span={cardSettings.compact ? 24 : 12}>
|
|
|
|
|
<EllipsesToolTip
|
|
|
|
|
title={`P: ${employee_prep ? `${employee_prep.first_name.substring(0, 3)} ${employee_prep.last_name.charAt(0)}` : ""}`}
|
|
|
|
|
kiosk={cardSettings.kiosk}
|
|
|
|
|
>
|
|
|
|
|
{employee_prep ? (
|
|
|
|
|
`P: ${employee_prep ? `${employee_prep.first_name.substring(0, 3)} ${employee_prep.last_name.charAt(0)}` : ""}`
|
|
|
|
|
) : (
|
|
|
|
|
<span> </span>
|
|
|
|
|
)}
|
|
|
|
|
</EllipsesToolTip>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col span={cardSettings.compact ? 24 : 12}>
|
|
|
|
|
<EllipsesToolTip
|
|
|
|
|
title={`R: ${employee_refinish ? `${employee_refinish.first_name.substring(0, 3)} ${employee_refinish.last_name.charAt(0)}` : ""} ${metadata.larhrs.aggregate.sum.mod_lb_hrs || "?"}h`}
|
|
|
|
|
kiosk={cardSettings.kiosk}
|
|
|
|
|
>
|
|
|
|
|
{employee_refinish || metadata.larhrs.aggregate.sum.mod_lb_hrs ? (
|
|
|
|
|
`R: ${employee_refinish ? `${employee_refinish.first_name.substring(0, 3)} ${employee_refinish.last_name.charAt(0)}` : ""} ${metadata.larhrs.aggregate.sum.mod_lb_hrs || "?"}h`
|
|
|
|
|
) : (
|
|
|
|
|
<span> </span>
|
|
|
|
|
)}
|
|
|
|
|
</EllipsesToolTip>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col span={cardSettings.compact ? 24 : 12}>
|
|
|
|
|
<EllipsesToolTip
|
|
|
|
|
title={`C: ${employee_csr ? `${employee_csr.first_name} ${employee_csr.last_name}` : ""}`}
|
|
|
|
|
kiosk={cardSettings.kiosk}
|
|
|
|
|
>
|
|
|
|
|
{employee_csr ? (
|
|
|
|
|
`C: ${employee_csr ? `${employee_csr.first_name} ${employee_csr.last_name}` : ""}`
|
|
|
|
|
) : (
|
|
|
|
|
<span> </span>
|
|
|
|
|
)}
|
|
|
|
|
</EllipsesToolTip>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
</Col>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const ActualInToolTip = ({ metadata, cardSettings }) =>
|
|
|
|
|
cardSettings?.actual_in && (
|
|
|
|
|
<Col span={cardSettings.compact ? 24 : 12}>
|
|
|
|
|
<EllipsesToolTip title={metadata.actual_in} kiosk={cardSettings.kiosk}>
|
|
|
|
|
{metadata.actual_in ? (
|
|
|
|
|
<Space>
|
|
|
|
|
<DownloadOutlined />
|
|
|
|
|
<DateTimeFormatter format="MM/DD">{metadata.actual_in}</DateTimeFormatter>
|
|
|
|
|
</Space>
|
|
|
|
|
) : (
|
|
|
|
|
<span> </span>
|
|
|
|
|
)}
|
|
|
|
|
</EllipsesToolTip>
|
|
|
|
|
</Col>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const ScheduledCompletionToolTip = ({ metadata, cardSettings, pastDueAlert }) =>
|
|
|
|
|
cardSettings?.scheduled_completion && (
|
|
|
|
|
<Col span={cardSettings.compact ? 24 : 12}>
|
|
|
|
|
<EllipsesToolTip title={metadata.scheduled_completion} kiosk={cardSettings.kiosk}>
|
|
|
|
|
{metadata.scheduled_completion ? (
|
|
|
|
|
<Space className={pastDueAlert}>
|
|
|
|
|
<CalendarOutlined />
|
|
|
|
|
<DateTimeFormatter format="MM/DD">{metadata.scheduled_completion}</DateTimeFormatter>
|
|
|
|
|
</Space>
|
|
|
|
|
) : (
|
|
|
|
|
<span> </span>
|
|
|
|
|
)}
|
|
|
|
|
</EllipsesToolTip>
|
|
|
|
|
</Col>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const AltTransportToolTip = ({ metadata, cardSettings }) =>
|
|
|
|
|
cardSettings?.ats && (
|
|
|
|
|
<Col span={12}>
|
|
|
|
|
<EllipsesToolTip title={metadata.alt_transport} kiosk={cardSettings.kiosk}>
|
|
|
|
|
{metadata.alt_transport ? metadata.alt_transport : <span> </span>}
|
|
|
|
|
</EllipsesToolTip>
|
|
|
|
|
</Col>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const SubletsComponent = ({ metadata, cardSettings }) =>
|
|
|
|
|
cardSettings?.sublets && (
|
|
|
|
|
<Col span={12}>
|
|
|
|
|
{metadata.subletLines ? (
|
|
|
|
|
<ProductionSubletsManageComponent subletJobLines={metadata.subletLines} />
|
|
|
|
|
) : (
|
|
|
|
|
<span> </span>
|
|
|
|
|
)}
|
|
|
|
|
</Col>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const ProductionNoteComponent = ({ metadata, cardSettings, card }) =>
|
|
|
|
|
cardSettings?.production_note && (
|
|
|
|
|
<Col span={24} style={{ margin: "2px 0" }}>
|
|
|
|
|
{metadata?.production_vars ? (
|
|
|
|
|
<ProductionListColumnProductionNote
|
|
|
|
|
record={{
|
|
|
|
|
production_vars: metadata?.production_vars,
|
|
|
|
|
id: card?.id,
|
|
|
|
|
refetch: card?.refetch
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
) : (
|
|
|
|
|
<span> </span>
|
|
|
|
|
)}
|
|
|
|
|
</Col>
|
|
|
|
|
);
|
|
|
|
|
const PartsStatusComponent = ({ metadata, cardSettings }) =>
|
|
|
|
|
cardSettings?.partsstatus && (
|
|
|
|
|
<Col span={24} style={{ textAlign: "center" }}>
|
|
|
|
|
{metadata.joblines_status ? <JobPartsQueueCount parts={metadata.joblines_status} /> : <span> </span>}
|
|
|
|
|
</Col>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
export default function ProductionBoardCard({ technician, card, bodyshop, cardSettings, clone }) {
|
|
|
|
|
const { t } = useTranslation();
|
|
|
|
|
@@ -97,7 +291,12 @@ export default function ProductionBoardCard({ technician, card, bodyshop, cardSe
|
|
|
|
|
/>
|
|
|
|
|
{metadata?.suspended && <PauseCircleOutlined className="circle-outline" key="suspended" />}
|
|
|
|
|
{metadata?.iouparent && (
|
|
|
|
|
<EllipsesToolTip title={t("jobs.labels.iou")} key="iouparent" className="iouparent">
|
|
|
|
|
<EllipsesToolTip
|
|
|
|
|
title={t("jobs.labels.iou")}
|
|
|
|
|
key="iouparent"
|
|
|
|
|
className="iouparent"
|
|
|
|
|
kiosk={cardSettings.kiosk}
|
|
|
|
|
>
|
|
|
|
|
<BranchesOutlined className="branches-outlined" />
|
|
|
|
|
</EllipsesToolTip>
|
|
|
|
|
)}
|
|
|
|
|
@@ -119,122 +318,30 @@ export default function ProductionBoardCard({ technician, card, bodyshop, cardSe
|
|
|
|
|
|
|
|
|
|
const bodyContent = (
|
|
|
|
|
<Row>
|
|
|
|
|
{cardSettings?.ownr_nm && (
|
|
|
|
|
<Col span={24}>
|
|
|
|
|
<EllipsesToolTip title={<OwnerNameDisplay ownerObject={metadata} />}>
|
|
|
|
|
{cardSettings.compact ? (
|
|
|
|
|
`${metadata.ownr_ln || ""} ${metadata.ownr_co_nm || ""}`
|
|
|
|
|
) : (
|
|
|
|
|
<OwnerNameDisplay ownerObject={metadata} />
|
|
|
|
|
)}
|
|
|
|
|
</EllipsesToolTip>
|
|
|
|
|
</Col>
|
|
|
|
|
)}
|
|
|
|
|
{cardSettings?.model_info && (
|
|
|
|
|
<Col span={24}>
|
|
|
|
|
<EllipsesToolTip
|
|
|
|
|
title={`${metadata.v_model_yr || ""} ${metadata.v_make_desc || ""} ${metadata.v_model_desc || ""}`}
|
|
|
|
|
>
|
|
|
|
|
{`${metadata.v_model_yr || ""} ${metadata.v_make_desc || ""} ${metadata.v_model_desc || ""}`}
|
|
|
|
|
</EllipsesToolTip>
|
|
|
|
|
</Col>
|
|
|
|
|
)}
|
|
|
|
|
{cardSettings?.ins_co_nm && metadata.ins_co_nm && (
|
|
|
|
|
<Col span={cardSettings.compact ? 24 : 12}>
|
|
|
|
|
<EllipsesToolTip title={metadata.ins_co_nm || ""}>{metadata.ins_co_nm || ""}</EllipsesToolTip>
|
|
|
|
|
</Col>
|
|
|
|
|
)}
|
|
|
|
|
{cardSettings?.clm_no && metadata.clm_no && (
|
|
|
|
|
<Col span={cardSettings.compact ? 24 : 12}>
|
|
|
|
|
<EllipsesToolTip title={metadata.clm_no || ""}>{metadata.clm_no || ""}</EllipsesToolTip>
|
|
|
|
|
</Col>
|
|
|
|
|
)}
|
|
|
|
|
{cardSettings?.employeeassignments && (
|
|
|
|
|
<Col span={24}>
|
|
|
|
|
<Row>
|
|
|
|
|
<Col span={cardSettings.compact ? 24 : 12}>
|
|
|
|
|
<EllipsesToolTip
|
|
|
|
|
title={`B: ${employee_body ? `${employee_body.first_name.substring(0, 3)} ${employee_body.last_name.charAt(0)}` : ""} ${metadata.labhrs.aggregate.sum.mod_lb_hrs || "?"}h`}
|
|
|
|
|
>
|
|
|
|
|
{`B: ${employee_body ? `${employee_body.first_name.substring(0, 3)} ${employee_body.last_name.charAt(0)}` : ""} ${metadata.labhrs.aggregate.sum.mod_lb_hrs || "?"}h`}
|
|
|
|
|
</EllipsesToolTip>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col span={cardSettings.compact ? 24 : 12}>
|
|
|
|
|
<EllipsesToolTip
|
|
|
|
|
title={`P: ${employee_prep ? `${employee_prep.first_name.substring(0, 3)} ${employee_prep.last_name.charAt(0)}` : ""}`}
|
|
|
|
|
>
|
|
|
|
|
{`P: ${employee_prep ? `${employee_prep.first_name.substring(0, 3)} ${employee_prep.last_name.charAt(0)}` : ""}`}
|
|
|
|
|
</EllipsesToolTip>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col span={cardSettings.compact ? 24 : 12}>
|
|
|
|
|
<EllipsesToolTip
|
|
|
|
|
title={`R: ${employee_refinish ? `${employee_refinish.first_name.substring(0, 3)} ${employee_refinish.last_name.charAt(0)}` : ""} ${metadata.larhrs.aggregate.sum.mod_lb_hrs || "?"}h`}
|
|
|
|
|
>
|
|
|
|
|
{`R: ${employee_refinish ? `${employee_refinish.first_name.substring(0, 3)} ${employee_refinish.last_name.charAt(0)}` : ""} ${metadata.larhrs.aggregate.sum.mod_lb_hrs || "?"}h`}
|
|
|
|
|
</EllipsesToolTip>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col span={cardSettings.compact ? 24 : 12}>
|
|
|
|
|
<EllipsesToolTip
|
|
|
|
|
title={`C: ${employee_csr ? `${employee_csr.first_name} ${employee_csr.last_name}` : ""}`}
|
|
|
|
|
>
|
|
|
|
|
{`C: ${employee_csr ? `${employee_csr.first_name} ${employee_csr.last_name}` : ""}`}
|
|
|
|
|
</EllipsesToolTip>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
</Col>
|
|
|
|
|
)}
|
|
|
|
|
{cardSettings?.actual_in && metadata.actual_in && (
|
|
|
|
|
<Col span={cardSettings.compact ? 24 : 12}>
|
|
|
|
|
<EllipsesToolTip title={metadata.actual_in}>
|
|
|
|
|
<Space>
|
|
|
|
|
<DownloadOutlined />
|
|
|
|
|
<DateTimeFormatter format="MM/DD">{metadata.actual_in}</DateTimeFormatter>
|
|
|
|
|
</Space>
|
|
|
|
|
</EllipsesToolTip>
|
|
|
|
|
</Col>
|
|
|
|
|
)}
|
|
|
|
|
{cardSettings?.scheduled_completion && metadata.scheduled_completion && (
|
|
|
|
|
<Col span={cardSettings.compact ? 24 : 12}>
|
|
|
|
|
<EllipsesToolTip title={metadata.scheduled_completion}>
|
|
|
|
|
<Space className={pastDueAlert}>
|
|
|
|
|
<CalendarOutlined />
|
|
|
|
|
<DateTimeFormatter format="MM/DD">{metadata.scheduled_completion}</DateTimeFormatter>
|
|
|
|
|
</Space>
|
|
|
|
|
</EllipsesToolTip>
|
|
|
|
|
</Col>
|
|
|
|
|
)}
|
|
|
|
|
{cardSettings?.ats && metadata.alt_transport && (
|
|
|
|
|
<Col span={12}>
|
|
|
|
|
<EllipsesToolTip title={metadata.alt_transport}>{metadata.alt_transport || ""}</EllipsesToolTip>
|
|
|
|
|
</Col>
|
|
|
|
|
)}
|
|
|
|
|
{cardSettings?.sublets && (
|
|
|
|
|
<Col span={12}>
|
|
|
|
|
<ProductionSubletsManageComponent subletJobLines={metadata.subletLines} />
|
|
|
|
|
</Col>
|
|
|
|
|
)}
|
|
|
|
|
{cardSettings?.production_note && (
|
|
|
|
|
<Col span={24}>
|
|
|
|
|
<ProductionListColumnProductionNote
|
|
|
|
|
record={{
|
|
|
|
|
production_vars: metadata?.production_vars,
|
|
|
|
|
id: card?.id,
|
|
|
|
|
refetch: card?.refetch
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</Col>
|
|
|
|
|
)}
|
|
|
|
|
{cardSettings?.partsstatus && (
|
|
|
|
|
<Col span={24}>
|
|
|
|
|
<JobPartsQueueCount parts={metadata.joblines_status} />
|
|
|
|
|
</Col>
|
|
|
|
|
)}
|
|
|
|
|
<OwnerNameToolTip metadata={metadata} cardSettings={cardSettings} />
|
|
|
|
|
<ModelInfoToolTip metadata={metadata} cardSettings={cardSettings} />
|
|
|
|
|
<InsuranceCompanyToolTip metadata={metadata} cardSettings={cardSettings} />
|
|
|
|
|
<ClaimNumberToolTip metadata={metadata} cardSettings={cardSettings} />
|
|
|
|
|
<EmployeeAssignmentsToolTip
|
|
|
|
|
metadata={metadata}
|
|
|
|
|
cardSettings={cardSettings}
|
|
|
|
|
employee_body={employee_body}
|
|
|
|
|
employee_prep={employee_prep}
|
|
|
|
|
employee_refinish={employee_refinish}
|
|
|
|
|
employee_csr={employee_csr}
|
|
|
|
|
/>
|
|
|
|
|
<ActualInToolTip metadata={metadata} cardSettings={cardSettings} />
|
|
|
|
|
<ScheduledCompletionToolTip metadata={metadata} cardSettings={cardSettings} pastDueAlert={pastDueAlert} />
|
|
|
|
|
<AltTransportToolTip metadata={metadata} cardSettings={cardSettings} />
|
|
|
|
|
<SubletsComponent metadata={metadata} cardSettings={cardSettings} />
|
|
|
|
|
<ProductionNoteComponent metadata={metadata} cardSettings={cardSettings} card={card} />
|
|
|
|
|
<PartsStatusComponent metadata={metadata} cardSettings={cardSettings} />
|
|
|
|
|
</Row>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Card
|
|
|
|
|
className="react-trello-card"
|
|
|
|
|
className={`react-trello-card ${cardSettings.kiosk ? "kiosk-mode" : ""}`}
|
|
|
|
|
size="small"
|
|
|
|
|
style={{
|
|
|
|
|
backgroundColor: cardSettings?.cardcolor && `rgba(${bgColor.r},${bgColor.g},${bgColor.b},${bgColor.a})`,
|
|
|
|
|
|