From a0f06ffdc21588e45d4ab48c3c7c0663587d075b Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Thu, 20 Jan 2022 13:10:45 -0800
Subject: [PATCH] IO-1558 Add past due indicator to Kanban card.

---
 .../production-board-kanban-card.component.jsx       | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx b/client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx
index 817627ec8..5fb2275cb 100644
--- a/client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx
+++ b/client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx
@@ -12,6 +12,7 @@ import ProductionAlert from "../production-list-columns/production-list-columns.
 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 moment from "moment";
 
 export default function ProductionBoardCard(
   technician,
@@ -37,6 +38,15 @@ export default function ProductionBoardCard(
   //   employee_csr = bodyshop.employees.find((e) => e.id === card.employee_csr);
   // }
 
+  const pastDueAlert =
+    !!card.scheduled_completion &&
+    ((moment().isSameOrAfter(moment(card.scheduled_completion), "day") &&
+      "production-completion-past") ||
+      (moment()
+        .add(1, "day")
+        .isSame(moment(card.scheduled_completion), "day") &&
+        "production-completion-soon"));
+
   return (
     <Card
       className="react-kanban-card imex-kanban-card"
@@ -145,7 +155,7 @@ export default function ProductionBoardCard(
           cardSettings.scheduled_completion &&
           card.scheduled_completion && (
             <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
-              <Space>
+              <Space className={pastDueAlert}>
                 <CalendarOutlined />
                 <DateTimeFormatter format="MM/DD">
                   {card.scheduled_completion}