60 lines
3.0 KiB
TypeScript
60 lines
3.0 KiB
TypeScript
import clsx from "clsx";
|
|
import type { License } from "@/lib/api";
|
|
import { formatDate, formatStamp, limitLabel } from "@/lib/format";
|
|
|
|
const REASON: Record<License["reason"], string> = {
|
|
new: "New",
|
|
renewal: "Renewal",
|
|
tier_change: "Tier change",
|
|
relink: "Relink",
|
|
manual: "Manual",
|
|
};
|
|
|
|
/*
|
|
* Licences are append-only: a renewal supersedes its predecessor rather than
|
|
* replacing it. So this is a ledger, not a table. Superseded rows stay visible
|
|
* and are overprinted the way a cancelled instrument is hiding them would
|
|
* destroy the only record of why an instance stopped working on a given date.
|
|
*/
|
|
export function Ledger({ licenses }: { licenses: License[] }) {
|
|
if (licenses.length === 0) {
|
|
return <p className="text-ink-2">No licence has ever been issued for this instance, so it is read-only.</p>;
|
|
}
|
|
|
|
return (
|
|
<ul className="grid">
|
|
{licenses.map((l) => {
|
|
const dead = Boolean(l.superseded_by);
|
|
return (
|
|
<li key={l.license_id} className={clsx("grid gap-4 border-b border-rule-soft py-4 last:border-0 sm:grid-cols-[9.5rem_1fr]", dead && "text-ink-3")}>
|
|
<div className="font-mono text-[0.72rem] tabular-nums text-ink-3">
|
|
<b className={clsx("block text-[0.82rem] font-semibold", dead ? "text-ink-3" : "text-ink")}>{formatDate(l.issued_at)}</b>
|
|
{formatStamp(l.issued_at)}
|
|
</div>
|
|
<div className="grid justify-items-start gap-1.5">
|
|
{dead && (
|
|
<span className="-rotate-2 rounded-sm border-2 border-archival px-1.5 py-0.5 font-mono text-[0.72rem] uppercase tracking-[0.18em] text-archival opacity-75">
|
|
Superseded
|
|
</span>
|
|
)}
|
|
<p className="flex flex-wrap items-center gap-2 font-semibold">
|
|
{l.tier.replace("_", " ")}
|
|
<span className="rounded-sm border border-rule px-1.5 py-0.5 font-mono text-[0.72rem] font-normal uppercase tracking-[0.09em] text-accent">{REASON[l.reason]}</span>
|
|
</p>
|
|
<p className="font-mono text-[0.72rem] tabular-nums text-ink-3">
|
|
{l.license_id.slice(0, 8)} · expires {formatDate(l.expires_at)} · {limitLabel(l.limits.max_servers)} servers · issued by {l.issued_by}
|
|
{l.superseded_by && (
|
|
<>
|
|
{" "}
|
|
· replaced by <span className="text-accent underline">{l.superseded_by.slice(0, 8)}</span>
|
|
</>
|
|
)}
|
|
</p>
|
|
</div>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
);
|
|
}
|