nxdns/admin/src/features/overview/StatTiles.tsx

/**
 * The window's four headline numbers, each with the way into the rows behind it.
 *
 * Neutral chrome throughout: no coloured accents, no per-tile tone. Emphasis is
 * typographic, so the eye ranks the figures rather than the panels, and a tile
 * never implies a state it is not reporting.
 *
 * The Activity links carry the bounds the **overview response** returned, not
 * bounds computed here — a client-computed window would send the reader to a
 * slightly different span than the one they were just reading.
 */

import * as stylex from "@stylexjs/stylex";
import { Link } from "@tanstack/react-router";
import { formatMicros } from "@/lib/format";
import type { OverviewTotals } from "@/lib/types";
import { styles as shared } from "@/ui/styles";
import { colors } from "@/ui/tokens.stylex";

const numberFormat = new Intl.NumberFormat();

const styles = stylex.create({
	/** Two columns on a phone, the whole set of four in one row from `md`. */
	grid: {
		display: "grid",
		gap: "0.75rem",
		gridTemplateColumns: {
			default: "repeat(2, minmax(0, 1fr))",
			"@media (min-width: 768px)": "repeat(4, minmax(0, 1fr))",
		},
	},
	tile: {
		display: "flex",
		flexDirection: "column",
		gap: "0.125rem",
		borderRadius: "0.25rem",
		borderWidth: 1,
		borderStyle: "solid",
		borderColor: colors.border,
		backgroundColor: colors.surfaceRaised,
		paddingInline: "1rem",
		paddingBlock: "0.75rem",
	},
	label: {
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
		color: colors.textMuted,
	},
	valueRow: {
		display: "flex",
		alignItems: "baseline",
		gap: "0.5rem",
		flexWrap: "wrap",
	},
	value: {
		fontSize: "1.875rem",
		lineHeight: "2.25rem",
		fontWeight: 600,
	},
	detail: {
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
		color: colors.textSecondary,
	},
	footer: {
		marginTop: "0.25rem",
		fontSize: "0.75rem",
		lineHeight: "1rem",
	},
	link: {
		color: colors.primaryOnSurface,
		textDecorationLine: "none",
	},
});

function percentOf(part: number, total: number): string | null {
	if (total === 0) return null;
	return `${((part / total) * 100).toFixed(1)}%`;
}

function Tile({
	label,
	value,
	detail,
	footer,
}: {
	label: string;
	value: string;
	detail?: string | null;
	footer?: React.ReactNode;
}) {
	return (
		<div {...stylex.props(styles.tile)}>
			<dt {...stylex.props(styles.label)}>{label}</dt>
			<dd {...stylex.props(styles.valueRow)}>
				<span {...stylex.props(styles.value, shared.tabularNums)}>{value}</span>
				{detail != null && <span {...stylex.props(styles.detail, shared.tabularNums)}>{detail}</span>}
			</dd>
			{footer !== undefined && <div {...stylex.props(styles.footer)}>{footer}</div>}
		</div>
	);
}

/** The window's totals with the bounds they were measured over. */
export interface StatTilesData extends OverviewTotals {
	since: number;
	until: number;
}

export default function StatTiles({ stats }: { stats: StatTilesData }) {
	const window = {
		mode: "history" as const,
		since: stats.since,
		until: stats.until,
		domain: undefined,
		client: undefined,
	};
	return (
		<dl {...stylex.props(styles.grid)}>
			<Tile
				label="Queries"
				value={numberFormat.format(stats.queries)}
				footer={
					<Link
						to="/activity"
						search={{ ...window, blocked: undefined }}
						{...stylex.props(styles.link, shared.focusRing)}
					>
						Open in Activity
					</Link>
				}
			/>
			<Tile
				label="Blocked"
				value={numberFormat.format(stats.blocked)}
				detail={percentOf(stats.blocked, stats.queries)}
				footer={
					<Link
						to="/activity"
						search={{ ...window, blocked: true }}
						{...stylex.props(styles.link, shared.focusRing)}
					>
						Open blocked queries
					</Link>
				}
			/>
			<Tile
				label="Clients"
				value={numberFormat.format(stats.clients)}
				footer={
					<Link to="/clients" {...stylex.props(styles.link, shared.focusRing)}>
						Manage clients
					</Link>
				}
			/>
			<Tile
				label="Avg response"
				value={stats.avg_response_time_us === null ? "—" : formatMicros(stats.avg_response_time_us)}
			/>
		</dl>
	);
}