From e8b15233ec29ca5557a881cc9b82a085f20a6108 Mon Sep 17 00:00:00 2001 From: Kisa Date: Sun, 7 Jun 2026 22:04:03 -0400 Subject: [PATCH] =?UTF-8?q?feat:=20stoplight=20label=20system=20=E2=80=94?= =?UTF-8?q?=20At=20Risk=20/=20Action=20Needed=20/=20Clear=20to=20Ship=20/?= =?UTF-8?q?=20On=20Track?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit RED At Risk: SUPPLY_LAPSED, VISIT_REQUIRED, RENEWAL_CRITICAL AMBER Action Needed: RENEWAL_ELEVATED, RENEWAL_SOON, TRANSFER_PENDING GREEN: Clear to Ship (RESUPPLY_READY), On Track (ACTIVE) Filter tabs updated to match 3-tier model. Co-Authored-By: Claude Sonnet 4.6 --- signal-ui/src/components/Badge.jsx | 114 ++++++++++----------- signal-ui/src/components/WorklistTable.jsx | 16 +-- 2 files changed, 65 insertions(+), 65 deletions(-) diff --git a/signal-ui/src/components/Badge.jsx b/signal-ui/src/components/Badge.jsx index 489420a..febcb9b 100644 --- a/signal-ui/src/components/Badge.jsx +++ b/signal-ui/src/components/Badge.jsx @@ -1,17 +1,55 @@ const FLAG_CONFIG = { - // 7-state display framework — 8 enum values map to 7 visual states - // VISIT_REQUIRED and RENEWAL_CRITICAL both display as "Escalate" - // SUPPLY_LAPSED displays as "Docs Required" - // TRANSFER_PENDING displays as "New Patient" - - ACTIVE: { - label: "On Track", - bg: "bg-[rgba(40,160,80,0.10)]", - text: "text-[#1A8040]", - border: "border-[#28A050]", - weight: "font-normal", - icon: "●", + // RED — At Risk: supply may be interrupted, immediate action required + SUPPLY_LAPSED: { + label: "At Risk", + bg: "bg-[rgba(176,0,0,0.12)]", + text: "text-[#B00000]", + border: "border-[#B00000]", + weight: "font-bold", + icon: "⚠", }, + VISIT_REQUIRED: { + label: "At Risk", + bg: "bg-[rgba(204,34,34,0.10)]", + text: "text-[#CC2222]", + border: "border-[#CC2222]", + weight: "font-bold", + icon: "⚠", + }, + RENEWAL_CRITICAL: { + label: "At Risk", + bg: "bg-[rgba(220,60,0,0.10)]", + text: "text-[#DC3C00]", + border: "border-[#DC3C00]", + weight: "font-bold", + icon: "⚠", + }, + // AMBER — Action Needed: confirm requirements before patient's specific deadline + RENEWAL_ELEVATED: { + label: "Action Needed", + bg: "bg-[rgba(203,107,32,0.12)]", + text: "text-[#CB6B20]", + border: "border-[#CB6B20]", + weight: "font-semibold", + icon: "→", + }, + RENEWAL_SOON: { + label: "Action Needed", + bg: "bg-[rgba(203,107,32,0.08)]", + text: "text-[#CB6B20]", + border: "border-[#CB6B20]", + weight: "font-normal", + icon: "→", + }, + TRANSFER_PENDING: { + label: "Action Needed", + bg: "bg-[rgba(203,107,32,0.08)]", + text: "text-[#CB6B20]", + border: "border-[#CB6B20]", + weight: "font-semibold", + icon: "→", + }, + // GREEN — no action needed RESUPPLY_READY: { label: "Clear to Ship", bg: "bg-[rgba(46,163,163,0.12)]", @@ -20,53 +58,13 @@ const FLAG_CONFIG = { weight: "font-semibold", icon: "✓", }, - RENEWAL_SOON: { - label: "Begin Outreach", - bg: "bg-[rgba(184,150,10,0.10)]", - text: "text-[#7A6000]", - border: "border-[#B8960A]", + ACTIVE: { + label: "On Track", + bg: "bg-[rgba(40,160,80,0.10)]", + text: "text-[#1A8040]", + border: "border-[#28A050]", weight: "font-normal", - icon: "→", - }, - RENEWAL_ELEVATED: { - label: "Confirm Appointment", - bg: "bg-[rgba(203,107,32,0.12)]", - text: "text-[#8A4A00]", - border: "border-[#CB6B20]", - weight: "font-semibold", - icon: "○", - }, - RENEWAL_CRITICAL: { - label: "Escalate", - bg: "bg-[rgba(204,34,34,0.10)]", - text: "text-[#CC2222]", - border: "border-[#CC2222]", - weight: "font-bold", - icon: "!", - }, - VISIT_REQUIRED: { - label: "Escalate", - bg: "bg-[rgba(204,34,34,0.10)]", - text: "text-[#CC2222]", - border: "border-[#CC2222]", - weight: "font-bold", - icon: "!", - }, - SUPPLY_LAPSED: { - label: "Docs Required", - bg: "bg-[rgba(155,68,0,0.10)]", - text: "text-[#7A3400]", - border: "border-[#9B4400]", - weight: "font-semibold", - icon: "!", - }, - TRANSFER_PENDING: { - label: "New Patient", - bg: "bg-[rgba(74,104,144,0.10)]", - text: "text-[#2A4870]", - border: "border-[#4A6890]", - weight: "font-semibold", - icon: "+", + icon: "●", }, }; diff --git a/signal-ui/src/components/WorklistTable.jsx b/signal-ui/src/components/WorklistTable.jsx index 5ce0694..bab948e 100644 --- a/signal-ui/src/components/WorklistTable.jsx +++ b/signal-ui/src/components/WorklistTable.jsx @@ -24,15 +24,15 @@ function scoreClass(priority) { const FILTERS = [ { key: "all", label: "All" }, - { key: "SUPPLY_LAPSED", label: "Docs Required" }, - { key: "escalate", label: "Escalate" }, - { key: "RENEWAL_ELEVATED", label: "Confirm Appt." }, - { key: "RENEWAL_SOON", label: "Begin Outreach" }, + { key: "at-risk", label: "At Risk" }, + { key: "action-needed", label: "Action Needed" }, { key: "RESUPPLY_READY", label: "Clear to Ship" }, - { key: "TRANSFER_PENDING", label: "New Patient" }, { key: "ACTIVE", label: "On Track" }, ]; +const AT_RISK_FLAGS = ["SUPPLY_LAPSED", "VISIT_REQUIRED", "RENEWAL_CRITICAL"]; +const ACTION_NEEDED_FLAGS = ["RENEWAL_ELEVATED", "RENEWAL_SOON", "TRANSFER_PENDING"]; + const HIGH_PRIORITY_FLAGS = ["SUPPLY_LAPSED", "VISIT_REQUIRED", "RENEWAL_CRITICAL", "TRANSFER_PENDING"]; const CONFIRM_VISIT_FLAGS = ["VISIT_REQUIRED", "RENEWAL_CRITICAL", "RENEWAL_ELEVATED", "RENEWAL_SOON"]; @@ -54,8 +54,10 @@ export default function WorklistTable({ records, activeFilter, onFilterChange }) const filtered = activeFilter === "all" ? localRecords - : activeFilter === "escalate" - ? localRecords.filter((r) => r.flag === "RENEWAL_CRITICAL" || r.flag === "VISIT_REQUIRED") + : activeFilter === "at-risk" + ? localRecords.filter((r) => AT_RISK_FLAGS.includes(r.flag)) + : activeFilter === "action-needed" + ? localRecords.filter((r) => ACTION_NEEDED_FLAGS.includes(r.flag)) : localRecords.filter((r) => r.flag === activeFilter); const todayStr = new Date().toLocaleDateString("en-US", {