);
}
const visible = [...events]
.sort((a, b) => new Date(b.date) - new Date(a.date))
.slice(0, MAX_VISIBLE_EVENTS);
return (
Account
Event
Conf.
Date
{visible.map((e) => (
{e.account}
{[1, 2, 3].map((bar) => (
))}
{new Date(e.date).toLocaleDateString()}
))}
);
}
/* ---------------- Sort ----------------
At 27 signals a flat inventory has no entry point: every card looks equally
important, which is the exact complaint in the brief. Sorting is the cheapest
fix — and "most active" is the right default, because the question people
arrive with is "which of my rules are actually working?".
Finding the DEAD signals is the other half of that job, and it is deliberately
not a sort option: "show me the broken ones" is a filter, not an ordering, and
burying it in a sort menu would still make you scroll past two dozen healthy
signals to be sure you had seen every dead one. */
const SORTS = [
{
key: "active", label: "Most active",
hint: "Matches in the last 30 days, high to low",
cmp: (a, b, A) => A[b.id].last30 - A[a.id].last30 || A[b.id].total - A[a.id].total,
},
{
key: "least", label: "Least active",
hint: "Matches in the last 30 days, low to high",
// Exact mirror of "Most active", including the all-time tie-break — so two
// signals with no matches this month are still ordered by whether they have
// ever fired, which is the difference between "quiet" and "broken".
cmp: (a, b, A) => A[a.id].last30 - A[b.id].last30 || A[a.id].total - A[b.id].total,
},
{
key: "weight", label: "Weight",
hint: "Critical signals first",
cmp: (a, b, A) => (b.weight || 1) - (a.weight || 1) || A[b.id].last30 - A[a.id].last30,
},
{
key: "name", label: "Name",
hint: "A to Z",
cmp: (a, b) => nameOf(a).localeCompare(nameOf(b)),
},
];
function SortMenu({ value, onChange }) {
const [open, setOpen] = useState(false);
const ref = useRef(null);
const current = SORTS.find((s) => s.key === value) || SORTS[0];
useEffect(() => {
if (!open) return;
const onDown = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
const onKey = (e) => e.key === "Escape" && setOpen(false);
document.addEventListener("mousedown", onDown);
document.addEventListener("keydown", onKey);
return () => {
document.removeEventListener("mousedown", onDown);
document.removeEventListener("keydown", onKey);
};
}, [open]);
return (
{open && (
{SORTS.map((s) => (
))}
)}
);
}
/* ---------------- Scan tier: the card inventory ----------------
The card is a div-with-a-role rather than a