feat: stoplight label system — At Risk / Action Needed / Clear to Ship / On Track

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 <noreply@anthropic.com>
This commit is contained in:
Kisa 2026-06-07 22:04:03 -04:00
parent 77a1cdb2c0
commit e8b15233ec
2 changed files with 65 additions and 65 deletions

View file

@ -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: "●",
},
};

View file

@ -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", {