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

import {
  CalendarOutlined,
  EyeFilled,
  DownloadOutlined,
  PauseCircleOutlined,
  BranchesOutlined,
} from "@ant-design/icons";
import { Card, Col, Row, Space, Tooltip } 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";
import dayjs from "../../utils/day";
import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
import JobPartsQueueCount from "../job-parts-queue-count/job-parts-queue-count.component";

const cardColor = (ssbuckets, totalHrs) => {
  const bucket = ssbuckets.filter(
    (bucket) =>
      bucket.gte <= totalHrs && (!!bucket.lt ? bucket.lt > totalHrs : true)
  )[0];

  let color = { r: 255, g: 255, b: 255 };

  if (bucket && bucket.color) {
    color = bucket.color;

    if (bucket.color.rgb) {
      color = bucket.color.rgb;
    }
  }

  return color;
};

function getContrastYIQ(bgColor) {
  const yiq = (bgColor.r * 299 + bgColor.g * 587 + bgColor.b * 114) / 1000;

  return yiq >= 128 ? "black" : "white";
}

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);
  }
  // if (card.employee_csr) {
  //   employee_csr = bodyshop.employees.find((e) => e.id === card.employee_csr);
  // }

  const pastDueAlert =
    !!card.scheduled_completion &&
    ((dayjs().isSameOrAfter(dayjs(card.scheduled_completion), "day") &&
      "production-completion-past") ||
      (dayjs()
        .add(1, "day")
        .isSame(dayjs(card.scheduled_completion), "day") &&
        "production-completion-soon"));

  const totalHrs =
    card.labhrs.aggregate.sum.mod_lb_hrs + card.larhrs.aggregate.sum.mod_lb_hrs;
  const bgColor = cardColor(bodyshop.ssbuckets, totalHrs);

  return (
    <Card
      className="react-kanban-card imex-kanban-card"
      size="small"
      style={{
        backgroundColor:
          cardSettings &&
          cardSettings.cardcolor &&
          `rgba(${bgColor.r},${bgColor.g},${bgColor.b},${bgColor.a})`,
        color:
          cardSettings && cardSettings.cardcolor && getContrastYIQ(bgColor),
      }}
      title={
        <Space>
          <ProductionAlert record={card} key="alert" />
          {card.suspended && (
            <PauseCircleOutlined style={{ color: "orangered" }} />
          )}
          {card.iouparent && (
            <Tooltip title={t("jobs.labels.iou")}>
              <BranchesOutlined style={{ color: "orangered" }} />
            </Tooltip>
          )}
          <span style={{ fontWeight: "bolder" }}>
            <Link
              to={
                technician
                  ? `/tech/joblookup?selected=${card.id}`
                  : `/manage/jobs/${card.id}`
              }
            >
              {card.ro_number || t("general.labels.na")}
            </Link>
          </span>
        </Space>
      }
      extra={
        <Link to={{ search: `?selected=${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">
                <OwnerNameDisplay ownerObject={card} />
              </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.actual_in && card.actual_in && (
          <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
            <Space>
              <DownloadOutlined />
              <DateTimeFormatter format="MM/DD">
                {card.actual_in}
              </DateTimeFormatter>
            </Space>
          </Col>
        )}
        {cardSettings &&
          cardSettings.scheduled_completion &&
          card.scheduled_completion && (
            <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
              <Space className={pastDueAlert}>
                <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>
        )}
        {cardSettings && cardSettings.partsstatus && (
          <Col span={24}>
            <JobPartsQueueCount parts={card.joblines_status} />
          </Col>
        )}
      </Row>
    </Card>
  );
}