56 lines
1.8 KiB
JavaScript
56 lines
1.8 KiB
JavaScript
import React from "react";
|
|
import { Card, Row, Col } 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";
|
|
|
|
export default function ProductionBoardCard(card) {
|
|
// console.log("card", card);
|
|
return (
|
|
<Card
|
|
className='react-kanban-card imex-kanban-card tight-antd-rows'
|
|
style={{ margin: ".2rem 0rem" }}
|
|
size='small'
|
|
title={`${card.ro_number || card.est_number} - ${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>{`B: ${card.labhrs || "?"}`}</div>
|
|
<div>{`R: ${card.labhrs || "?"}`}</div>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col span={24}>
|
|
<DateTimeFormatter>{card.scheduled_completion}</DateTimeFormatter>
|
|
</Col>
|
|
</Row>
|
|
<div className='imex-flex-row imex-flex-row__flex-space-around'>
|
|
<ProductionAlert record={card} key='alert' />
|
|
<Link to={`/manage/jobs/${card.id}`}>
|
|
<EyeFilled key='setting' />
|
|
</Link>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|