bodyshop/client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx

import { CalendarOutlined, EyeFilled } from "@ant-design/icons";
import { Card, Col, Row, Space } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { DateTimeFormatter } from "../../utils/DateFormatter";
import ProductionAlert from "../production-list-columns/production-list-columns.alert.component";
import ProductionListColumnProductionNote from "../production-list-columns/production-list-columns.productionnote.component";
import ProductionSubletsManageComponent from "../production-sublets-manage/production-sublets-manage.component";
import "./production-board-card.styles.scss";

export default function ProductionBoardCard(
  technician,
  card,
  bodyshop,
  cardSettings
) {
  const { t } = useTranslation();

  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 (
    <Card
      className="react-kanban-card imex-kanban-card"
      size="small"
      title={
        <Space>
          <ProductionAlert record={card} key="alert" />
          <span style={{ fontWeight: "bolder" }}>
            {card.ro_number || t("general.labels.na")}
          </span>
        </Space>
      }
      extra={
        technician ? (
          <Link to={`/tech/joblookup?selected=${card.id}`}>
            <EyeFilled />
          </Link>
        ) : (
          <Link to={`/manage/jobs/${card.id}`}>
            <EyeFilled />
          </Link>
        )
      }
    >
      <Row>
        {cardSettings && cardSettings.ownr_nm && (
          <Col span={24}>
            {cardSettings && cardSettings.compact ? (
              <div className="ellipses">{`${card.ownr_ln || ""} ${
                card.ownr_co_nm || ""
              }`}</div>
            ) : (
              <div className="ellipses">{`${card.ownr_ln || ""}, ${
                card.ownr_fn || ""
              } ${card.ownr_co_nm || ""}`}</div>
            )}
          </Col>
        )}
        <Col span={24}>
          <div className="ellipses">{`${card.v_model_yr || ""} ${
            card.v_make_desc || ""
          } ${card.v_model_desc || ""}`}</div>
        </Col>
        {cardSettings && cardSettings.ins_co_nm && card.ins_co_nm && (
          <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
            <div className="ellipses">{card.ins_co_nm || ""}</div>
          </Col>
        )}
        {cardSettings && cardSettings.clm_no && card.clm_no && (
          <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
            <div className="ellipses">{card.clm_no || ""}</div>
          </Col>
        )}

        {cardSettings && cardSettings.employeeassignments && (
          <Col span={24}>
            <Row>
              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`B: ${
                employee_body
                  ? `${employee_body.first_name.substr(
                      0,
                      3
                    )} ${employee_body.last_name.charAt(0)}`
                  : ""
              } ${card.labhrs.aggregate.sum.mod_lb_hrs || "?"}h`}</Col>
              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`P: ${
                employee_prep
                  ? `${employee_prep.first_name.substr(
                      0,
                      3
                    )} ${employee_prep.last_name.charAt(0)}`
                  : ""
              }`}</Col>
              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`R: ${
                employee_refinish
                  ? `${employee_refinish.first_name.substr(
                      0,
                      3
                    )} ${employee_refinish.last_name.charAt(0)}`
                  : ""
              } ${card.larhrs.aggregate.sum.mod_lb_hrs || "?"}h`}</Col>
              {/* <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`C: ${
                employee_csr
                  ? `${employee_csr.first_name} ${employee_csr.last_name}`
                  : ""
              }`}</Col> */}
            </Row>
          </Col>
        )}
        {/* {cardSettings && cardSettings.laborhrs && (
          <Col span={24}>
            <Row>
              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`B: ${
                card.labhrs.aggregate.sum.mod_lb_hrs || "?"
              } hrs`}</Col>
              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`R: ${
                card.larhrs.aggregate.sum.mod_lb_hrs || "?"
              } hrs`}</Col>
            </Row>
          </Col>
        )} */}
        {cardSettings &&
          cardSettings.scheduled_completion &&
          card.scheduled_completion && (
            <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
              <Space>
                <CalendarOutlined />
                <DateTimeFormatter format="MM/DD">
                  {card.scheduled_completion}
                </DateTimeFormatter>
              </Space>
            </Col>
          )}
        {cardSettings && cardSettings.ats && card.alt_transport && (
          <Col span={12}>
            <div>{card.alt_transport || ""}</div>
          </Col>
        )}
        {cardSettings && cardSettings.sublets && (
          <Col span={12}>
            <ProductionSubletsManageComponent
              subletJobLines={card.subletLines}
            />
          </Col>
        )}
        {cardSettings && cardSettings.production_note && (
          <Col span={24}>
            {cardSettings && cardSettings.production_note && (
              <ProductionListColumnProductionNote record={card} />
            )}
          </Col>
        )}
      </Row>
    </Card>
  );
}