- Optimization and Edgecases

Signed-off-by: Dave Richer <dave@imexsystems.ca>

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

@@ -6,49 +6,31 @@ import {
   PauseCircleOutlined
 } from "@ant-design/icons";
 import { Card, Col, Row, Space, Tooltip } from "antd";
-import React, { useMemo, useCallback } from "react";
+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 "./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";
 
-/**
- * Get the color of the card based on the total hours
- * @param ssbuckets
- * @param totalHrs
- * @returns {{r: number, b: number, g: number}}
- */
 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 };
 };
 
-/**
- * Get the contrast color based on the background color
- * @param bgColor
- * @returns {string}
- */
 const getContrastYIQ = (bgColor) =>
   (bgColor.r * 299 + bgColor.g * 587 + bgColor.b * 114) / 1000 >= 128 ? "black" : "white";
 
-/**
- * Production Board Card component
- * @param technician
- * @param card
- * @param bodyshop
- * @param cardSettings
- * @returns {Element}
- * @constructor
- */
 export default function ProductionBoardCard({ technician, card, bodyshop, cardSettings }) {
   const { t } = useTranslation();
-
   const { metadata } = card;
 
   const employee_body = useMemo(
@@ -90,9 +72,8 @@ export default function ProductionBoardCard({ technician, card, bodyshop, cardSe
       className="react-trello-card"
       size="small"
       style={{
-        backgroundColor:
-          cardSettings && cardSettings.cardcolor && `rgba(${bgColor.r},${bgColor.g},${bgColor.b},${bgColor.a})`,
-        color: cardSettings && cardSettings.cardcolor && contrastYIQ,
+        backgroundColor: cardSettings?.cardcolor && `rgba(${bgColor.r},${bgColor.g},${bgColor.b},${bgColor.a})`,
+        color: cardSettings?.cardcolor && contrastYIQ,
         maxWidth: "250px",
         margin: "5px"
       }}