mrhid6andClaude Opus 5
7fea321376
Four counts, each one work somebody has to do today: failed injections, licences expiring inside 14 days, past-due subscriptions, and purchases unlinked for more than 48 hours. No totals and no revenue -- nothing that cannot be acted on. Every row links straight to the thing that needs doing. An empty queue says "nothing to do here" rather than rendering a bare zero, so a quiet dashboard reads as quiet rather than broken. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import Link from "next/link";
|
|
import clsx from "clsx";
|
|
|
|
const TONE = {
|
|
expired: "border-l-expired text-expired",
|
|
warn: "border-l-warn text-warn",
|
|
accent: "border-l-accent text-accent",
|
|
} as const;
|
|
|
|
export function Queue({
|
|
title,
|
|
count,
|
|
tone,
|
|
items,
|
|
}: {
|
|
title: string;
|
|
count: number;
|
|
tone: keyof typeof TONE;
|
|
items: { label: string; href: string; meta: string }[];
|
|
}) {
|
|
return (
|
|
<section
|
|
className={clsx(
|
|
"grid gap-2 rounded border border-l-4 border-rule bg-panel p-4",
|
|
TONE[tone],
|
|
)}
|
|
>
|
|
<h2 className="font-mono text-[0.72rem] font-normal uppercase tracking-[0.1em] text-ink-3">
|
|
{title}
|
|
</h2>
|
|
<p className="text-3xl font-extrabold leading-none tabular-nums tracking-[-0.03em]">
|
|
{count}
|
|
</p>
|
|
{items.length === 0 ? (
|
|
<p className="text-[0.72rem] text-ink-3">Nothing to do here.</p>
|
|
) : (
|
|
<ul className="grid gap-1">
|
|
{items.map((i) => (
|
|
<li
|
|
key={i.href}
|
|
className="flex justify-between gap-2 font-mono text-[0.72rem] text-ink-2"
|
|
>
|
|
<Link href={i.href} className="text-accent underline">
|
|
{i.label}
|
|
</Link>
|
|
<span className="tabular-nums">{i.meta}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|