@heyramzi/ui 1.54.1 → 2.0.0

package/src/tasks/record/logic.ts

@@ -0,0 +1,324 @@
+// The record's pure logic: grouping, merging, picking. No DOM, no clock of its own.
+import type {
+	RecordEvent,
+	RecordFilterDef,
+	RecordNext,
+	RecordSummary,
+	StageDef,
+	StepDef,
+	StepGroupDef,
+	StepMarker,
+} from "./types.js";
+
+// =========================
+// EVENTS
+// =========================
+
+/** The calendar day of a timestamp as `YYYY-MM-DD`, in the given zone or the viewer's own. */
+export function localDay(iso: string, timeZone?: string): string {
+	return new Intl.DateTimeFormat("en-CA", {
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit",
+		timeZone,
+	}).format(new Date(iso));
+}
+
+export type DayGroup = { day: string; events: RecordEvent[] };
+
+/** Newest day first, newest event first inside a day. */
+export function groupEventsByDay(events: readonly RecordEvent[], timeZone?: string): DayGroup[] {
+	const sorted = [...events].sort(
+		(a, b) => new Date(b.occurredAt).getTime() - new Date(a.occurredAt).getTime(),
+	);
+	const groups: DayGroup[] = [];
+	for (const event of sorted) {
+		const day = localDay(event.occurredAt, timeZone);
+		const last = groups[groups.length - 1];
+		if (last && last.day === day) last.events.push(event);
+		else groups.push({ day, events: [event] });
+	}
+	return groups;
+}
+
+/** `today`, `yesterday` or `date`, by calendar distance from `today`. */
+export function dayRelation(day: string, today: string): "today" | "yesterday" | "date" {
+	if (day === today) return "today";
+	const gap = (Date.parse(`${today}T00:00:00Z`) - Date.parse(`${day}T00:00:00Z`)) / 86_400_000;
+	return gap === 1 ? "yesterday" : "date";
+}
+
+/** The events one filter chip shows. An unknown or empty key shows everything. */
+export function eventsForFilter(
+	events: readonly RecordEvent[],
+	filterKey: string,
+	filters: readonly RecordFilterDef[],
+): RecordEvent[] {
+	const filter = filters.find((f) => f.key === filterKey);
+	if (!filter) return [...events];
+	const kinds = new Set(filter.kinds);
+	return events.filter((e) => kinds.has(e.kind));
+}
+
+/** Per-chip counts. Chips with no events are the host's to hide. */
+export function filterCounts(
+	events: readonly RecordEvent[],
+	filters: readonly RecordFilterDef[],
+): Record<string, number> {
+	const counts: Record<string, number> = {};
+	for (const filter of filters) {
+		const kinds = new Set(filter.kinds);
+		counts[filter.key] = events.filter((e) => kinds.has(e.kind)).length;
+	}
+	return counts;
+}
+
+/** Keep the newest `limit` events and count the rest, cutting a day group where the limit falls. */
+export function foldGroups(
+	groups: readonly DayGroup[],
+	limit: number,
+): { groups: DayGroup[]; hidden: number } {
+	const kept: DayGroup[] = [];
+	let used = 0;
+	let total = 0;
+	for (const group of groups) total += group.events.length;
+	for (const group of groups) {
+		if (used >= limit) break;
+		const room = limit - used;
+		const events = group.events.slice(0, room);
+		kept.push({ day: group.day, events });
+		used += events.length;
+	}
+	return { groups: kept, hidden: total - used };
+}
+
+export type ProjectEvents = {
+	id: string;
+	name: string;
+	href?: string | null;
+	events: readonly RecordEvent[];
+};
+
+/**
+ * One client's timeline: its own events and every project's, each project event
+ * tagged with where it came from. An id seen twice keeps the first, so a source
+ * passed in both lists draws once. Newest first.
+ */
+export function mergeClientEvents(
+	clientEvents: readonly RecordEvent[],
+	projects: readonly ProjectEvents[],
+): RecordEvent[] {
+	const seen = new Set<string>();
+	const merged: RecordEvent[] = [];
+	const add = (event: RecordEvent) => {
+		if (seen.has(event.id)) return;
+		seen.add(event.id);
+		merged.push(event);
+	};
+	for (const project of projects) {
+		for (const event of project.events) {
+			add({
+				...event,
+				projectId: project.id,
+				projectName: project.name,
+				projectHref: project.href ?? null,
+			});
+		}
+	}
+	for (const event of clientEvents) add({ ...event, projectId: null, projectName: null, projectHref: null });
+	return merged.sort((a, b) => new Date(b.occurredAt).getTime() - new Date(a.occurredAt).getTime());
+}
+
+// =========================
+// PROJECTS
+// =========================
+
+const ACTIVE: ReadonlySet<string> = new Set(["open", "proposal", "ongoing"]);
+
+/** Projects still in play: not closed, and in a stage that isn't won-and-done or lost. */
+export function activeProjects(
+	projects: readonly RecordSummary[],
+	stages: readonly StageDef[],
+): RecordSummary[] {
+	const category = new Map(stages.map((s) => [s.key, s.category]));
+	return projects.filter((p) => {
+		if (p.closed) return false;
+		const c = category.get(p.stageKey);
+		return c === undefined || ACTIVE.has(c);
+	});
+}
+
+/** The earliest dated next across active projects, undated ones after, ties by list order. */
+export function nextAcrossProjects(
+	projects: readonly RecordSummary[],
+	stages: readonly StageDef[],
+): RecordNext | null {
+	let best: RecordNext | null = null;
+	for (const project of activeProjects(projects, stages)) {
+		const next = project.next;
+		if (!next) continue;
+		const candidate: RecordNext = { ...next, projectId: project.id, projectName: project.name };
+		if (!best) {
+			best = candidate;
+			continue;
+		}
+		if (!best.date && candidate.date) best = candidate;
+		else if (best.date && candidate.date && candidate.date < best.date) best = candidate;
+	}
+	return best;
+}
+
+export type LatestStatus = NonNullable<RecordSummary["whereWeAre"]> & {
+	projectId: string;
+	projectName: string;
+};
+
+/** The newest "where we are" across projects, tagged with its project. */
+export function latestWhereWeAre(projects: readonly RecordSummary[]): LatestStatus | null {
+	let best: LatestStatus | null = null;
+	for (const project of projects) {
+		const status = project.whereWeAre;
+		if (!status || !status.text) continue;
+		const at = status.at ? new Date(status.at).getTime() : 0;
+		const bestAt = best?.at ? new Date(best.at).getTime() : -1;
+		if (!best || at > bestAt) best = { ...status, projectId: project.id, projectName: project.name };
+	}
+	return best;
+}
+
+export type MoneyTotals = Record<string, { pipeline: number; won: number; paid: number }>;
+
+export type ClientRollup = {
+	count: number;
+	activeCount: number;
+	totals: MoneyTotals;
+	lastCallAt: string | null;
+};
+
+/**
+ * The client's strip. Pipeline is the value of projects in an open or proposal
+ * stage, won the value in an ongoing or completed one, paid what came in. A lost
+ * project adds to none. Totals stay per currency, because a sum across two is a lie.
+ */
+export function rollupProjects(
+	projects: readonly RecordSummary[],
+	stages: readonly StageDef[],
+	fallbackCurrency = "EUR",
+): ClientRollup {
+	const category = new Map(stages.map((s) => [s.key, s.category]));
+	const totals: MoneyTotals = {};
+	let lastCallAt: string | null = null;
+	for (const project of projects) {
+		const currency = project.currency ?? fallbackCurrency;
+		const bucket = (totals[currency] ??= { pipeline: 0, won: 0, paid: 0 });
+		const c = category.get(project.stageKey);
+		const value = project.value ?? 0;
+		if (c === "open" || c === "proposal") bucket.pipeline += value;
+		if (c === "ongoing" || c === "completed") bucket.won += value;
+		bucket.paid += project.paid ?? 0;
+		if (project.lastCallAt && (!lastCallAt || project.lastCallAt > lastCallAt)) lastCallAt = project.lastCallAt;
+	}
+	return {
+		count: projects.length,
+		activeCount: activeProjects(projects, stages).length,
+		totals,
+		lastCallAt,
+	};
+}
+
+// =========================
+// STEPS
+// =========================
+
+/** A step is visible unless hidden. */
+export function visibleSteps(steps: readonly StepDef[]): StepDef[] {
+	return steps.filter((s) => !s.hidden);
+}
+
+export function stepProgress(steps: readonly StepDef[]): { done: number; total: number } {
+	const visible = visibleSteps(steps);
+	return { done: visible.filter((s) => s.done).length, total: visible.length };
+}
+
+/**
+ * One marker per visible step. The current step is the first one not done. Any
+ * open step before it, or past its own date, is late. Nothing else is.
+ * `today` is an ISO date.
+ */
+export function stepMarkers(steps: readonly StepDef[], today: string): Map<string, StepMarker> {
+	const visible = visibleSteps(steps);
+	const currentId = visible.find((s) => !s.done)?.id ?? null;
+	const markers = new Map<string, StepMarker>();
+	let beforeCurrent = currentId !== null;
+	for (const step of visible) {
+		if (step.done) {
+			markers.set(step.id, "complete");
+			continue;
+		}
+		if (step.id === currentId) {
+			markers.set(step.id, "current");
+			beforeCurrent = false;
+			continue;
+		}
+		const due = (step.end ?? step.start)?.slice(0, 10);
+		const overdue = due !== undefined && due < today;
+		markers.set(step.id, beforeCurrent || overdue ? "late" : "pending");
+	}
+	return markers;
+}
+
+export type StepBucket = { key: string; label: string | null; steps: StepDef[] };
+
+/**
+ * Buckets by group in the declared order, not by consecutive runs, so a reordered
+ * rail still draws one header per group. Steps with no or an unknown group go last,
+ * under no header.
+ */
+export function groupSteps(steps: readonly StepDef[], groups: readonly StepGroupDef[] = []): StepBucket[] {
+	const known = new Set(groups.map((g) => g.key));
+	const buckets: StepBucket[] = groups.map((g) => ({ key: g.key, label: g.label, steps: [] }));
+	const loose: StepBucket = { key: "", label: null, steps: [] };
+	for (const step of steps) {
+		const bucket = buckets.find((b) => b.key === step.group);
+		(step.group && known.has(step.group) && bucket ? bucket : loose).steps.push(step);
+	}
+	const result = buckets.filter((b) => b.steps.length > 0);
+	if (loose.steps.length > 0) result.push(loose);
+	return result;
+}
+
+/** Move `movedId` next to `targetId` inside the id list. Same list back when nothing moves. */
+export function reorderIds(
+	ids: readonly string[],
+	movedId: string,
+	targetId: string,
+	before: boolean,
+): string[] {
+	if (movedId === targetId) return [...ids];
+	const from = ids.indexOf(movedId);
+	if (from < 0 || !ids.includes(targetId)) return [...ids];
+	const next = [...ids];
+	next.splice(from, 1);
+	const at = next.indexOf(targetId);
+	next.splice(before ? at : at + 1, 0, movedId);
+	return next;
+}
+
+/** Swap a step with its neighbour in its own group. Same list back at an edge. */
+export function nudgeStep(steps: readonly StepDef[], id: string, direction: -1 | 1): string[] {
+	const ids = steps.map((s) => s.id);
+	const step = steps.find((s) => s.id === id);
+	if (!step) return ids;
+	const mates = steps.filter((s) => s.group === step.group && !s.hidden);
+	const at = mates.findIndex((s) => s.id === id);
+	const neighbour = mates[at + direction];
+	if (!neighbour) return ids;
+	const a = ids.indexOf(id);
+	const b = ids.indexOf(neighbour.id);
+	const first = ids[a];
+	const second = ids[b];
+	if (first === undefined || second === undefined) return ids;
+	ids[a] = second;
+	ids[b] = first;
+	return ids;
+}

package/src/tasks/record/next-up.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import { ArrowRight } from "phosphor-svelte";
+import { cn } from "../../lib/utils.js";
+import { TONE_TEXT } from "../../lib/tone.js";
+import StatusBadge from "../status-badge.svelte";
+import { gutterClass } from "./gutter.js";
+import { formatRange } from "./format.js";
+import { todayIso } from "../dates.js";
+import { resolveLabels, type RecordLabels, type RecordNext } from "./types.js";
+
+// =========================
+// PROPS
+// =========================
+interface Props {
+	next?: RecordNext | null;
+	/** Client mode: say which project the next step belongs to. */
+	showProject?: boolean;
+	labels?: Partial<RecordLabels>;
+	locale?: string;
+	/** ISO date. Decides "late". Defaults to the viewer's today. */
+	today?: string;
+	class?: string;
+}
+let { next, showProject = false, labels, locale, today = todayIso(), class: className }: Props = $props();
+
+// =========================
+// DERIVED
+// =========================
+let t = $derived(resolveLabels(labels));
+let due = $derived((next?.endDate ?? next?.date)?.slice(0, 10));
+let late = $derived(due !== undefined && due < today);
+let when = $derived(next?.date ? formatRange(next.date, next.endDate, locale) : null);
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+{#if next}
+	<section
+		aria-label={t.next}
+		class={cn(
+			"flex flex-wrap items-center gap-x-2.5 gap-y-1 border-b border-border py-2 text-sm",
+			gutterClass,
+			className,
+		)}
+	>
+		<ArrowRight class="size-3.5 shrink-0 text-muted-foreground" aria-hidden="true" />
+		<span class="font-medium">{t.next}</span>
+		{#if when}
+			<span class={cn("tabular-nums", late ? TONE_TEXT.warning : "text-muted-foreground")}>{when}</span>
+		{/if}
+		{#if next.href}
+			<a href={next.href} class="min-w-0 truncate underline-offset-2 hover:underline">{next.label}</a>
+		{:else}
+			<span class="min-w-0 truncate">{next.label}</span>
+		{/if}
+		{#if next.owner}
+			<span class="text-muted-foreground">{next.owner}</span>
+		{/if}
+		{#if showProject && next.projectName}
+			<span class="text-muted-foreground">{next.projectName}</span>
+		{/if}
+		{#if late}
+			<StatusBadge tone="warning" capitalize={false}>{t.late}</StatusBadge>
+		{/if}
+	</section>
+{/if}

package/src/tasks/record/project-list.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import { cn } from "../../lib/utils.js";
+import { Progress } from "../../shadcn/progress/index.js";
+import { TONE_TEXT } from "../../lib/tone.js";
+import StatusBadge from "../status-badge.svelte";
+import { todayIso } from "../dates.js";
+import { formatMoney, formatRange } from "./format.js";
+import {
+	resolveLabels,
+	type RecordLabels,
+	type RecordSummary,
+	type StageDef,
+} from "./types.js";
+
+// =========================
+// PROPS
+// =========================
+interface Props {
+	projects: RecordSummary[];
+	/** The agency's stages: each project draws its stage's label and tone. */
+	stages: StageDef[];
+	/** A project being looked at, marked in the list. */
+	activeId?: string | null;
+	/** Money shown when a project has none of its own. */
+	currency?: string;
+	labels?: Partial<RecordLabels>;
+	locale?: string;
+	/** ISO date. Decides "late". Defaults to the viewer's today. */
+	today?: string;
+	class?: string;
+}
+let {
+	projects,
+	stages,
+	activeId = null,
+	currency = "EUR",
+	labels,
+	locale,
+	today = todayIso(),
+	class: className,
+}: Props = $props();
+
+// =========================
+// DERIVED
+// =========================
+let t = $derived(resolveLabels(labels));
+let stageByKey = $derived(new Map(stages.map((s) => [s.key, s])));
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+{#snippet row(project: RecordSummary)}
+	{@const stage = stageByKey.get(project.stageKey)}
+	{@const next = project.next}
+	{@const late = Boolean(next?.date && (next.endDate ?? next.date).slice(0, 10) < today)}
+	<span class="flex items-start justify-between gap-3">
+		<span class="min-w-0 truncate text-sm font-medium">{project.name}</span>
+		{#if project.value != null}
+			<span class="shrink-0 text-sm tabular-nums text-muted-foreground">
+				{formatMoney(project.value, project.currency ?? currency, locale, true)}
+			</span>
+		{/if}
+	</span>
+	<span class="flex flex-wrap items-center gap-x-2 gap-y-1">
+		<StatusBadge tone={stage?.tone ?? "neutral"} dot capitalize={false}>
+			{stage ? stage.label : project.stageKey}{project.stageDetail ? ` · ${project.stageDetail}` : ""}
+		</StatusBadge>
+		{#if project.whereWeAre?.health}
+			<StatusBadge tone={project.whereWeAre.health.tone} capitalize={false}>
+				{project.whereWeAre.health.label}
+			</StatusBadge>
+		{/if}
+	</span>
+	{#if project.whereWeAre?.text}
+		<span class="line-clamp-2 text-xs leading-snug text-muted-foreground">{project.whereWeAre.text}</span>
+	{/if}
+	{#if project.progress && project.progress.total > 0}
+		<span class="flex items-center gap-2">
+			<Progress
+				value={(project.progress.done / project.progress.total) * 100}
+				tone={project.progress.done === project.progress.total ? "success" : undefined}
+				max={100}
+				class="h-1 flex-1"
+				aria-label={t.stepsCount(project.progress.done, project.progress.total)}
+			/>
+			<span class="text-xs tabular-nums text-muted-foreground">
+				{t.stepsCount(project.progress.done, project.progress.total)}
+			</span>
+		</span>
+	{/if}
+	{#if next}
+		<span class="flex flex-wrap items-baseline gap-x-2 text-xs text-muted-foreground">
+			<span>{t.next}</span>
+			{#if next.date}
+				<span class={cn("tabular-nums", late && TONE_TEXT.warning)}>{formatRange(next.date, next.endDate, locale)}</span>
+			{/if}
+			<span class="min-w-0 truncate text-foreground">{next.label}</span>
+		</span>
+	{/if}
+{/snippet}
+
+{#if projects.length === 0}
+	<p class={cn("text-sm text-muted-foreground", className)}>{t.noProjects}</p>
+{:else}
+	<ul class={cn("flex flex-col gap-1", className)}>
+		{#each projects as project (project.id)}
+			{@const active = project.id === activeId}
+			<li>
+				{#if project.href}
+					<a
+						href={project.href}
+						aria-current={active ? "page" : undefined}
+						class={cn(
+							"flex flex-col gap-1.5 rounded-lg px-2 py-2 transition-colors any-pointer-coarse:py-3",
+							"outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
+							active ? "bg-muted" : "hover:bg-muted/60",
+						)}
+					>
+						{@render row(project)}
+					</a>
+				{:else}
+					<div class={cn("flex flex-col gap-1.5 rounded-lg px-2 py-2", active && "bg-muted")}>
+						{@render row(project)}
+					</div>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+{/if}