122 lines
4.4 KiB
JavaScript
122 lines
4.4 KiB
JavaScript
import React from "react";
|
|
import { Card, Row, Col, Dropdown } from "antd";
|
|
import { DateTimeFormatter } from "../../utils/DateFormatter";
|
|
import ProductionAlert from "../production-list-columns/production-list-columns.alert.component";
|
|
import { EyeFilled } from "@ant-design/icons";
|
|
import { Link } from "react-router-dom";
|
|
import "./production-board-card.styles.scss";
|
|
import ProductionRemoveButton from "../production-remove-button/production-remove-button.component";
|
|
import { useTranslation } from "react-i18next";
|
|
import ProductionSubletsManageComponent from "../production-sublets-manage/production-sublets-manage.component";
|
|
import ProductionListColumnProductionNote from "../production-list-columns/production-list-columns.productionnote.component";
|
|
|
|
export default function ProductionBoardCard(technician, card, bodyshop) {
|
|
const { t } = useTranslation();
|
|
const menu = (
|
|
<div>
|
|
<Card title={t("general.labels.actions")}>
|
|
<ProductionRemoveButton jobId={card.id} />
|
|
</Card>
|
|
</div>
|
|
);
|
|
let employee_body, employee_prep, employee_refinish, employee_csr;
|
|
if (card.employee_body) {
|
|
employee_body = bodyshop.employees.find((e) => e.id === card.employee_body);
|
|
}
|
|
if (card.employee_prep) {
|
|
employee_prep = bodyshop.employees.find((e) => e.id === card.employee_prep);
|
|
}
|
|
if (card.employee_refinish) {
|
|
employee_refinish = bodyshop.employees.find(
|
|
(e) => e.id === card.employee_refinish
|
|
);
|
|
}
|
|
if (card.employee_csr) {
|
|
employee_csr = bodyshop.employees.find((e) => e.id === card.employee_csr);
|
|
}
|
|
|
|
return (
|
|
<Dropdown overlay={menu} trigger={["contextMenu"]}>
|
|
<Card
|
|
className="react-kanban-card imex-kanban-card tight-antd-rows"
|
|
//style={{ margin: ".2rem 0rem" }}
|
|
title={`${card.ro_number || t("general.labels.na")} - ${
|
|
card.v_model_yr
|
|
} ${card.v_make_desc || ""} ${card.v_model_desc || ""}`}
|
|
>
|
|
<Row>
|
|
<Col span={24}>
|
|
<div className="ellipses">{`${card.ownr_fn || ""} ${
|
|
card.ownr_ln || ""
|
|
} ${card.ownr_co_nm || ""}`}</div>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col span={12}>
|
|
<div className="ellipses">{card.clm_no || ""}</div>
|
|
</Col>
|
|
<Col span={12}>
|
|
<div className="ellipses">{card.ins_co_nm || ""}</div>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col span={24}>
|
|
<div className="imex-flex-row imex-flex-row__flex-space-around">
|
|
<div className="mex-flex-row__margin">
|
|
<div>{`B: ${card.labhrs.aggregate.sum.mod_lb_hrs || "?"}`}</div>
|
|
<div>{`R: ${card.larhrs.aggregate.sum.mod_lb_hrs || "?"}`}</div>
|
|
</div>
|
|
<div className="mex-flex-row__margin">
|
|
<div>{`B: ${
|
|
employee_body
|
|
? `${employee_body.first_name} ${employee_body.last_name}`
|
|
: ""
|
|
}`}</div>
|
|
<div>{`P: ${
|
|
employee_prep
|
|
? `${employee_prep.first_name} ${employee_prep.last_name}`
|
|
: ""
|
|
}`}</div>
|
|
<div>{`R: ${
|
|
employee_refinish
|
|
? `${employee_refinish.first_name} ${employee_refinish.last_name}`
|
|
: ""
|
|
}`}</div>
|
|
<div>{`CSR: ${
|
|
employee_csr
|
|
? `${employee_csr.first_name} ${employee_csr.last_name}`
|
|
: ""
|
|
}`}</div>
|
|
</div>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col span={18}>
|
|
<DateTimeFormatter>{card.scheduled_completion}</DateTimeFormatter>
|
|
</Col>
|
|
<Col span={6}>
|
|
<div>{card.alt_transport || ""}</div>
|
|
</Col>
|
|
</Row>
|
|
<div>
|
|
<ProductionListColumnProductionNote record={card} />
|
|
</div>
|
|
<div className="imex-flex-row imex-flex-row__flex-space-around">
|
|
<ProductionAlert record={card} key="alert" />
|
|
<ProductionSubletsManageComponent subletJobLines={card.subletLines} />
|
|
{technician ? (
|
|
<Link to={`/tech/joblookup?selected=${card.id}`}>
|
|
<EyeFilled />
|
|
</Link>
|
|
) : (
|
|
<Link to={`/manage/jobs/${card.id}`}>
|
|
<EyeFilled />
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
</Dropdown>
|
|
);
|
|
}
|