IO-1722 job size color in production card

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

@@ -0,0 +1,37 @@
+import { Col, List, Space, Typography } from "antd";
+import React from "react";
+
+const CardColorLegend = ({ bodyshop, cardSettings }) => {
+  const data = bodyshop.ssbuckets.map((size) => ({
+    label: size.label,
+    color: size.color?.hex ?? "white",
+  }));
+
+  return (
+    <Col>
+      <Typography>Legend:</Typography>
+      <List
+        grid={{
+          gutter: 16,
+        }}
+        dataSource={data}
+        renderItem={(item) => (
+          <List.Item>
+            <Space>
+              <div
+                style={{
+                  width: "1.5rem",
+                  aspectRatio: "1/1",
+                  backgroundColor: item.color,
+                }}
+              ></div>
+              <div>{item.label}</div>
+            </Space>
+          </List.Item>
+        )}
+      />
+    </Col>
+  );
+};
+
+export default CardColorLegend;

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

@@ -18,6 +18,26 @@ import moment from "moment";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import JobPartsQueueCount from "../job-parts-queue-count/job-parts-queue-count.component";
 
+const cardColor = (job_sizes, totalHrs) => {
+  for (const size of job_sizes) {
+    if (totalHrs <= (size.lt || 999) && totalHrs >= size.gte) {
+      if (size.color) {
+        return size.color.hex;
+      }
+    }
+  }
+  return "";
+};
+
+function getContrastYIQ(hexColor) {
+  const r = parseInt(hexColor.substr(1, 2), 16);
+  const g = parseInt(hexColor.substr(3, 2), 16);
+  const b = parseInt(hexColor.substr(5, 2), 16);
+  const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+
+  return yiq >= 128 ? "black" : "white";
+}
+
 export default function ProductionBoardCard(
   technician,
   card,
@@ -54,10 +74,21 @@ export default function ProductionBoardCard(
         .isSame(moment(card.scheduled_completion), "day") &&
         "production-completion-soon"));
 
+  const totalHrs =
+    card.labhrs.aggregate.sum.mod_lb_hrs + card.larhrs.aggregate.sum.mod_lb_hrs;
+
   return (
     <Card
       className="react-kanban-card imex-kanban-card"
       size="small"
+      style={{
+        backgroundColor:
+          cardSettings &&
+          cardSettings.cardcolor &&
+          cardColor(bodyshop.ssbuckets, totalHrs),
+
+        color: getContrastYIQ(cardColor(bodyshop.ssbuckets, totalHrs)),
+      }}
       title={
         <Space>
           <ProductionAlert record={card} key="alert" />