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

import {
  BranchesOutlined,
  CalendarOutlined,
  DownloadOutlined,
  EyeFilled,
  PauseCircleOutlined
} from "@ant-design/icons";
import { Card, Col, Row, Space, Tooltip } from "antd";
import Dinero from "dinero.js";
import React, { useMemo } 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 dayjs from "../../utils/day";
import JobPartsQueueCount from "../job-parts-queue-count/job-parts-queue-count.component";
import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
import ShareToTeamsButton from "../share-to-teams/share-to-teams.component.jsx";
import { PiMicrosoftTeamsLogo } from "react-icons/pi";

const cardColor = (ssbuckets, totalHrs) => {
  const bucket = ssbuckets.find((bucket) => bucket.gte <= totalHrs && (!bucket.lt || bucket.lt > totalHrs));
  return bucket && bucket.color
    ? bucket.color.rgb || bucket.color
    : {
        r: 255,
        g: 255,
        b: 255,
        a: 1,
        fallback: "var(--card-bg-fallback)"
      };
};

const getContrastYIQ = (bgColor, isDarkMode = document.documentElement.getAttribute("data-theme") === "dark") => {
  // Use fallback if bgColor is invalid
  if (!bgColor || bgColor.fallback) return isDarkMode ? "var(--card-text-fallback)" : "black";
  // Calculate luminance for contrast
  const luminance = (bgColor.r * 299 + bgColor.g * 587 + bgColor.b * 114) / 1000;
  // Adjust threshold for dark mode to ensure readable text
  return luminance >= (isDarkMode ? 150 : 128) ? "black" : isDarkMode ? "var(--card-text-fallback)" : "white";
};

const findEmployeeById = (employees, id) => employees.find((e) => e.id === id);

const EllipsesToolTip = React.memo(({ title, children, kiosk }) => {
  if (kiosk || !title) {
    return <div className="ellipses no-select">{children}</div>;
  }
  return (
    <Tooltip title={title}>
      <div className="ellipses">{children}</div>
    </Tooltip>
  );
});

EllipsesToolTip.displayName = "EllipsesToolTip";

const OwnerNameToolTip = ({ metadata, cardSettings }) =>
  cardSettings?.ownr_nm && (
    <Col span={24}>
      <EllipsesToolTip
        title={metadata.ownr_ln || metadata.ownr_co_nm ? <OwnerNameDisplay ownerObject={metadata} /> : null}
        kiosk={cardSettings.kiosk}
      >
        {metadata.ownr_ln || metadata.ownr_co_nm ? (
          cardSettings.compact ? (
            `${metadata.ownr_ln || ""} ${metadata.ownr_co_nm || ""}`
          ) : (
            <OwnerNameDisplay ownerObject={metadata} />
          )
        ) : (
          <span>&nbsp;</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
            ? `${metadata.v_model_yr || ""} ${metadata.v_make_desc || ""} ${metadata.v_model_desc || ""}`
            : null
        }
        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>&nbsp;</span>
        )}
      </EllipsesToolTip>
    </Col>
  );

const InsuranceCompanyToolTip = ({ metadata, cardSettings }) =>
  cardSettings?.ins_co_nm && (
    <Col span={cardSettings.compact ? 24 : 12}>
      <EllipsesToolTip title={metadata.ins_co_nm || null} kiosk={cardSettings.kiosk}>
        {metadata.ins_co_nm ? metadata.ins_co_nm : <span>&nbsp;</span>}
      </EllipsesToolTip>
    </Col>
  );

const ClaimNumberToolTip = ({ metadata, cardSettings }) =>
  cardSettings?.clm_no && (
    <Col span={cardSettings.compact ? 24 : 12}>
      <EllipsesToolTip title={metadata.clm_no || null} kiosk={cardSettings.kiosk}>
        {metadata.clm_no ? metadata.clm_no : <span>&nbsp;</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={
              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`
                : null
            }
            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>&nbsp;</span>
            )}
          </EllipsesToolTip>
        </Col>
        <Col span={cardSettings.compact ? 24 : 12}>
          <EllipsesToolTip
            title={
              employee_prep
                ? `P: ${employee_prep ? `${employee_prep.first_name.substring(0, 3)} ${employee_prep.last_name.charAt(0)}` : ""}`
                : null
            }
            kiosk={cardSettings.kiosk}
          >
            {employee_prep ? (
              `P: ${employee_prep ? `${employee_prep.first_name.substring(0, 3)} ${employee_prep.last_name.charAt(0)}` : ""}`
            ) : (
              <span>&nbsp;</span>
            )}
          </EllipsesToolTip>
        </Col>
        <Col span={cardSettings.compact ? 24 : 12}>
          <EllipsesToolTip
            title={
              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`
                : null
            }
            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>&nbsp;</span>
            )}
          </EllipsesToolTip>
        </Col>
        <Col span={cardSettings.compact ? 24 : 12}>
          <EllipsesToolTip
            title={
              employee_csr ? `C: ${employee_csr ? `${employee_csr.first_name} ${employee_csr.last_name}` : ""}` : null
            }
            kiosk={cardSettings.kiosk}
          >
            {employee_csr ? (
              `C: ${employee_csr ? `${employee_csr.first_name} ${employee_csr.last_name}` : ""}`
            ) : (
              <span>&nbsp;</span>
            )}
          </EllipsesToolTip>
        </Col>
      </Row>
    </Col>
  );

const ActualInToolTip = ({ metadata, cardSettings }) =>
  cardSettings?.actual_in && (
    <Col span={cardSettings.compact ? 24 : 12}>
      <EllipsesToolTip title={metadata.actual_in || null} kiosk={cardSettings.kiosk}>
        {metadata.actual_in ? (
          <Space>
            <DownloadOutlined />
            <DateTimeFormatter format="MM/DD">{metadata.actual_in}</DateTimeFormatter>
          </Space>
        ) : (
          <span>&nbsp;</span>
        )}
      </EllipsesToolTip>
    </Col>
  );

const EstimatorToolTip = ({ metadata, cardSettings }) => {
  return (
    cardSettings?.estimator && (
      <Col span={cardSettings.compact ? 24 : 12}>
        <EllipsesToolTip
          title={metadata.est_ct_fn && metadata.est_ct_ln ? `${metadata.est_ct_fn} ${metadata.est_ct_ln}` : null}
          kiosk={cardSettings.kiosk}
        >
          {metadata.est_ct_fn && metadata.est_ct_ln ? (
            <span>E: {`${metadata.est_ct_fn} ${metadata.est_ct_ln}`}</span>
          ) : (
            <span>&nbsp;</span>
          )}
        </EllipsesToolTip>
      </Col>
    )
  );
};

const SubtotalTooltip = ({ metadata, cardSettings }) => {
  const dineroAmount = Dinero(metadata?.job_totals?.totals?.subtotal ?? Dinero()).toFormat();
  return (
    cardSettings?.subtotal && (
      <Col span={cardSettings.compact ? 24 : 12}>
        <EllipsesToolTip title={`${dineroAmount}`} kiosk={cardSettings.kiosk}>
          {dineroAmount}
        </EllipsesToolTip>
      </Col>
    )
  );
};

const ScheduledCompletionToolTip = ({ metadata, cardSettings, pastDueAlert }) =>
  cardSettings?.scheduled_completion && (
    <Col span={cardSettings.compact ? 24 : 12}>
      <EllipsesToolTip title={metadata.scheduled_completion || null} kiosk={cardSettings.kiosk}>
        {metadata.scheduled_completion ? (
          <Space className={pastDueAlert}>
            <CalendarOutlined />
            <DateTimeFormatter format="MM/DD">{metadata.scheduled_completion}</DateTimeFormatter>
          </Space>
        ) : (
          <span>&nbsp;</span>
        )}
      </EllipsesToolTip>
    </Col>
  );

const AltTransportToolTip = ({ metadata, cardSettings }) =>
  cardSettings?.ats && (
    <Col span={12}>
      <EllipsesToolTip title={metadata.alt_transport || null} kiosk={cardSettings.kiosk}>
        {metadata.alt_transport ? metadata.alt_transport : <span>&nbsp;</span>}
      </EllipsesToolTip>
    </Col>
  );

const SubletsComponent = ({ metadata, cardSettings }) =>
  cardSettings?.sublets && (
    <Col span={12}>
      {metadata.subletLines ? (
        <ProductionSubletsManageComponent subletJobLines={metadata.subletLines} />
      ) : (
        <span>&nbsp;</span>
      )}
    </Col>
  );

const ProductionNoteComponent = ({ metadata, cardSettings, card }) =>
  cardSettings?.production_note && (
    <Col span={24} style={{ margin: "2px 0" }}>
      <ProductionListColumnProductionNote
        record={{
          production_vars: metadata?.production_vars,
          id: card?.id,
          refetch: card?.refetch
        }}
      />
    </Col>
  );

const PartsStatusComponent = ({ metadata, cardSettings }) =>
  cardSettings?.partsstatus && (
    <Col span={24} style={{ textAlign: "center" }}>
      {metadata.joblines_status ? <JobPartsQueueCount parts={metadata.joblines_status} /> : <span>&nbsp;</span>}
    </Col>
  );

const TasksToolTip = ({ metadata, cardSettings, t }) =>
  cardSettings?.tasks && (
    <Col span={12}>
      <EllipsesToolTip
        title={`${t("production.labels.tasks")}: ${metadata.tasks_aggregate?.aggregate?.count || 0}`}
        kiosk={cardSettings.kiosk}
      >
        {metadata.tasks_aggregate?.aggregate?.count ? (
          `T: ${metadata.tasks_aggregate.aggregate.count}`
        ) : (
          <span>T: 0</span>
        )}
      </EllipsesToolTip>
    </Col>
  );

export default function ProductionBoardCard({ technician, card, bodyshop, cardSettings }) {
  const { t } = useTranslation();
  const { metadata } = card;
  const employees = useMemo(() => bodyshop.employees, [bodyshop.employees]);
  const { employee_body, employee_prep, employee_refinish, employee_csr } = useMemo(() => {
    return {
      employee_body: metadata?.employee_body && findEmployeeById(employees, metadata.employee_body),
      employee_prep: metadata?.employee_prep && findEmployeeById(employees, metadata.employee_prep),
      employee_refinish: metadata?.employee_refinish && findEmployeeById(employees, metadata.employee_refinish),
      employee_csr: metadata?.employee_csr && findEmployeeById(employees, metadata.employee_csr)
    };
  }, [metadata, employees]);
  const pastDueAlert = useMemo(() => {
    if (!metadata?.scheduled_completion) return null;
    const completionDate = dayjs(metadata.scheduled_completion);
    if (dayjs().isSameOrAfter(completionDate, "day")) return "production-completion-past";
    if (dayjs().add(1, "day").isSame(completionDate, "day")) return "production-completion-soon";
    return null;
  }, [metadata?.scheduled_completion]);
  const totalHrs = useMemo(() => {
    return metadata?.labhrs && metadata?.larhrs
      ? metadata.labhrs.aggregate.sum.mod_lb_hrs + metadata.larhrs.aggregate.sum.mod_lb_hrs
      : 0;
  }, [metadata?.labhrs, metadata?.larhrs]);
  const bgColor = useMemo(() => cardColor(bodyshop.ssbuckets, totalHrs), [bodyshop.ssbuckets, totalHrs]);
  const contrastYIQ = useMemo(() => getContrastYIQ(bgColor), [bgColor]);
  const isBodyEmpty = useMemo(() => {
    return !(
      cardSettings?.ownr_nm ||
      cardSettings?.model_info ||
      cardSettings?.ins_co_nm ||
      cardSettings?.clm_no ||
      cardSettings?.employeeassignments ||
      cardSettings?.actual_in ||
      cardSettings?.scheduled_completion ||
      cardSettings?.ats ||
      cardSettings?.sublets ||
      cardSettings?.production_note ||
      cardSettings?.partsstatus ||
      cardSettings?.estimator ||
      cardSettings?.subtotal ||
      cardSettings?.tasks
    );
  }, [cardSettings]);

  const headerContent = (
    <div className="header-content-container">
      <div className="inner-container">
        <ProductionAlert id={card.id} productionVars={metadata?.production_vars} refetch={card?.refetch} key="alert" />
        {metadata?.suspended && <PauseCircleOutlined className="circle-outline" key="suspended" />}
        {metadata?.iouparent && (
          <EllipsesToolTip
            title={t("jobs.labels.iou")}
            key="iouparent"
            className="iouparent"
            kiosk={cardSettings.kiosk}
          >
            <BranchesOutlined className="branches-outlined" />
          </EllipsesToolTip>
        )}
      </div>
      <span className="tech-container">
        <Link to={technician ? `/tech/joblookup?selected=${card.id}` : `/manage/jobs/${card.id}`}>
          {metadata?.ro_number || t("general.labels.na")}
        </Link>
      </span>
      {isBodyEmpty && (
        <div className="body-empty-container">
          <Link to={{ search: `?selected=${card.id}` }}>
            <EyeFilled />
          </Link>
        </div>
      )}
    </div>
  );

  const bodyContent = (
    <Row>
      <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}
      />
      <EstimatorToolTip metadata={metadata} cardSettings={cardSettings} />
      <TasksToolTip metadata={metadata} cardSettings={cardSettings} t={t} />
      <SubtotalTooltip metadata={metadata} cardSettings={cardSettings} t={t} />
      <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 ${cardSettings.kiosk ? "kiosk-mode" : ""}`}
      size="small"
      style={{
        backgroundColor: cardSettings?.cardcolor
          ? bgColor.fallback || `rgba(${bgColor.r},${bgColor.g},${bgColor.b},${bgColor.a || 1})`
          : "var(--card-bg-fallback)",
        color: cardSettings?.cardcolor ? contrastYIQ : "var(--card-text-fallback)"
      }}
      title={!isBodyEmpty ? headerContent : null}
      extra={
        !isBodyEmpty && (
          <Space>
            <ShareToTeamsButton
              noIcon={true}
              linkText={
                <div className="share-to-teams-badge">
                  <PiMicrosoftTeamsLogo />
                </div>
              }
              urlOverride={`${window.location.origin}/manage/jobs/${card.id}`}
            />
            <Link to={{ search: `?selected=${card.id}` }}>
              <EyeFilled />
            </Link>
          </Space>
        )
      }
    >
      {isBodyEmpty ? headerContent : bodyContent}
    </Card>
  );
}