)}
{orderedReps.map(({ r, risk, brk }) => {
const isRisk = risk >= 50;
const isBreak = brk >= 50;
const target = MGR_TIER_TARGETS[r.tier] || 12000;
return (
{ e.preventDefault(); setDrop(r.id); }}
onDragLeave={() => setDrop(null)}
onDrop={async () => {
if (drag) {
setAssigned({ ...assigned, [drag.id]: r.id });
const dragSnap = drag;
setDrag(null); setDrop(null);
try {
await AppData.mutate.queueAssign(dragSnap.id, r.id);
window.toast && window.toast(`${dragSnap.lead} → ${r.name.split(" ")[0]}${AppData.LIVE ? " · routed" : ""}`, "success");
} catch (_e) {}
}
}}
style={{
borderColor: drop === r.id ? "var(--accent-money)"
: isRisk ? "color-mix(in oklch, var(--state-danger) 35%, transparent)"
: isBreak ? "color-mix(in oklch, var(--accent-money) 35%, transparent)"
: undefined,
background: drop === r.id ? "color-mix(in oklch, var(--accent-money) 6%, var(--bg-elevated))" : undefined,
cursor: "pointer"
}}
onClick={(e) => { if (e.target.closest("button")) return; setRepDrill(r); }}>
{r.name}
{r.presence === "live" ? "on call" : "idle"} · {r.appts} appts
{(isRisk || isBreak) && (
{isRisk && (
at-risk · {risk}
)}
{isBreak && (
breakout · {brk}
)}
)}
MTD
${(r.mtd || 0).toLocaleString()} / ${target.toLocaleString()}
Today
{Object.entries(assigned).filter(([_, rep]) => rep === r.id).map(([qid]) => {
const q = QUEUE.find(x => x.id === qid);
if (!q) return null;
return (
{q.lead}
NEW
);
})}
{!Object.values(assigned).includes(r.id) && drag && (
Drop to assign
)}
{/* GAP-MC1/MC2 — inline manager actions */}