@hub-kit/core 0.3.0

package/dist/components/dashboard/kpi-card.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Link } from "@tanstack/react-router";
+import { Skeleton } from "../../ui/skeleton.js";
+import { cn } from "../../lib/class-names.js";
+export function KpiCard({ icon: Icon, iconTint, label, to, loading, value, delta, headerRight, className, }) {
+    return (_jsxs("div", { className: cn("relative flex flex-col rounded-xl bg-card p-3 shadow-xs transition-shadow hover:shadow-md", className), children: [_jsx(Link, { to: to, "aria-label": label, className: "absolute inset-0 rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" }), _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: cn("inline-flex size-6 shrink-0 items-center justify-center rounded-md text-white", iconTint), children: _jsx(Icon, { className: "size-3.5" }) }), _jsx("span", { className: "truncate text-[15px] font-medium text-muted-foreground", children: label })] }), headerRight && _jsx("span", { className: "relative z-10 shrink-0", children: headerRight })] }), _jsx("div", { className: "flex flex-1 flex-col justify-center gap-1 py-2", children: loading ? (_jsx(Skeleton, { className: "h-8 w-28" })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-2xl font-semibold tracking-tight tabular-nums text-foreground", children: value }), delta] })) })] }));
+}

package/dist/components/dashboard/money-cards-row.d.ts

@@ -0,0 +1,29 @@
+import type { LucideIcon } from "lucide-react";
+import type { OverviewPeriod } from "./periods";
+import { type PeriodLabels, type PeriodValue } from "./period-picker";
+export interface MoneyFigure {
+    value: number;
+    count?: number;
+    previousValue?: number;
+    loading: boolean;
+}
+export interface MoneyCardSpec {
+    key: string;
+    icon: LucideIcon;
+    to: string;
+    iconTint: string;
+    higherIsBetter: boolean;
+    label: string;
+    countLabel?: (count: number) => string;
+    deltaLabel: (period: OverviewPeriod, percent: string) => string;
+}
+export declare function MoneyCardsRow({ cards, figures, periods, onPeriodChange, periodLabels, formatMoney, formatDay, className, }: {
+    cards: MoneyCardSpec[];
+    figures: Record<string, MoneyFigure>;
+    periods: Record<string, PeriodValue>;
+    onPeriodChange: (cardKey: string, value: PeriodValue) => void;
+    periodLabels?: PeriodLabels;
+    formatMoney: (value: number) => string;
+    formatDay: (iso: string) => string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/dashboard/money-cards-row.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { ArrowDownRight, ArrowUpRight } from "lucide-react";
+import { KpiCard } from "./kpi-card.js";
+import { PeriodPicker } from "./period-picker.js";
+import { cn } from "../../lib/class-names.js";
+export function MoneyCardsRow({ cards, figures, periods, onPeriodChange, periodLabels, formatMoney, formatDay, className, }) {
+    return (_jsx("div", { className: cn("grid h-full gap-3 sm:grid-cols-2 xl:grid-cols-3", className), children: cards.map((card) => (_jsx(MoneyCard, { card: card, figure: figures[card.key], period: periods[card.key], onPeriodChange: (value) => onPeriodChange(card.key, value), periodLabels: periodLabels, formatMoney: formatMoney, formatDay: formatDay }, card.key))) }));
+}
+function MoneyCard({ card, figure, period, onPeriodChange, periodLabels, formatMoney, formatDay, }) {
+    const value = figure?.value ?? 0;
+    const loading = figure?.loading ?? true;
+    return (_jsx(KpiCard, { icon: card.icon, iconTint: card.iconTint, label: card.label, to: card.to, loading: loading, value: formatMoney(value), delta: _jsxs("span", { className: "flex flex-wrap items-center gap-x-2 gap-y-0.5", children: [figure?.count !== undefined && card.countLabel && (_jsx("span", { className: "text-[13px] font-medium tabular-nums text-muted-foreground", children: card.countLabel(figure.count) })), _jsx(MoneyDelta, { value: value, previousValue: figure?.previousValue, higherIsBetter: card.higherIsBetter, period: period.period, deltaLabel: card.deltaLabel })] }), headerRight: _jsx(PeriodPicker, { value: period, onChange: onPeriodChange, labels: periodLabels, formatDay: formatDay }) }));
+}
+function MoneyDelta({ value, previousValue, higherIsBetter, period, deltaLabel, }) {
+    const percent = useMemo(() => {
+        if (previousValue === undefined || previousValue === 0)
+            return null;
+        const raw = ((value - previousValue) / Math.abs(previousValue)) * 100;
+        return Number.isFinite(raw) ? raw : null;
+    }, [value, previousValue]);
+    if (percent === null)
+        return null;
+    const up = percent >= 0;
+    const good = up === higherIsBetter;
+    const Icon = up ? ArrowUpRight : ArrowDownRight;
+    return (_jsxs("span", { className: cn("flex items-center gap-1 text-[13px] font-medium", good ? "text-success" : "text-danger"), children: [_jsx(Icon, { className: "size-3.5 shrink-0", "aria-hidden": true }), deltaLabel(period, `${up ? "+" : ""}${percent.toFixed(1)}`)] }));
+}

package/dist/components/dashboard/money-trend-chart.d.ts

@@ -0,0 +1,13 @@
+export interface MoneyTrendPoint {
+    label: string;
+    incoming: number;
+    outgoing: number;
+}
+export declare function MoneyTrendChart({ data, loading, incomingLabel, outgoingLabel, formatMoney, formatMoneyCompact, }: {
+    data: MoneyTrendPoint[];
+    loading: boolean;
+    incomingLabel: string;
+    outgoingLabel: string;
+    formatMoney: (value: number) => string;
+    formatMoneyCompact: (value: number) => string;
+}): import("react").JSX.Element | null;

package/dist/components/dashboard/money-trend-chart.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
+import { Skeleton } from "../../ui/skeleton.js";
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from "../../ui/chart.js";
+export function MoneyTrendChart({ data, loading, incomingLabel, outgoingLabel, formatMoney, formatMoneyCompact, }) {
+    const config = useMemo(() => ({
+        incoming: { label: incomingLabel, color: "var(--color-chart-1)" },
+        outgoing: { label: outgoingLabel, color: "var(--color-chart-2)" },
+    }), [incomingLabel, outgoingLabel]);
+    if (loading)
+        return _jsx(Skeleton, { className: "h-[190px] w-full rounded-xl" });
+    if (data.length === 0)
+        return null;
+    return (_jsx(ChartContainer, { config: config, className: "h-[190px] w-full", children: _jsxs(LineChart, { data: data, margin: { left: 0, right: 8, top: 4, bottom: 0 }, children: [_jsx(CartesianGrid, { vertical: false, strokeDasharray: "3 3", className: "stroke-border" }), _jsx(XAxis, { dataKey: "label", tickLine: false, axisLine: false, tickMargin: 6, tick: { fontSize: 11, fill: "var(--color-muted-foreground)" } }), _jsx(YAxis, { tickLine: false, axisLine: false, width: 46, tick: { fontSize: 11, fill: "var(--color-muted-foreground)" }, tickFormatter: (value) => formatMoneyCompact(value) }), _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { formatter: (value) => formatMoney(Number(value)) }) }), _jsx(ChartLegend, { content: _jsx(ChartLegendContent, {}) }), _jsx(Line, { dataKey: "incoming", name: incomingLabel, type: "monotone", stroke: "var(--color-incoming)", strokeWidth: 2, dot: false }), _jsx(Line, { dataKey: "outgoing", name: outgoingLabel, type: "monotone", stroke: "var(--color-outgoing)", strokeWidth: 2, dot: false })] }) }));
+}

package/dist/components/dashboard/panel.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+export declare function DashboardPanel({ title, titleExtra, headerRight, className, dataTour, children, }: {
+    title: string;
+    titleExtra?: ReactNode;
+    headerRight?: ReactNode;
+    className?: string;
+    dataTour?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/dashboard/panel.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/class-names.js";
+export function DashboardPanel({ title, titleExtra, headerRight, className, dataTour, children, }) {
+    return (_jsxs("section", { "data-tour": dataTour, className: cn("flex min-w-0 flex-col rounded-2xl bg-brand-wash p-4", className), children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("h2", { className: "flex min-w-0 flex-wrap items-baseline gap-x-2 text-[15px] font-semibold tracking-tight text-foreground", children: [_jsx("span", { className: "truncate", children: title }), titleExtra && (_jsx("span", { className: "text-[13px] font-medium tabular-nums text-muted-foreground", children: titleExtra }))] }), headerRight && _jsx("span", { className: "flex shrink-0 items-center gap-2", children: headerRight })] }), children] }));
+}

package/dist/components/dashboard/period-picker.d.ts

@@ -0,0 +1,25 @@
+import { type DateRangeCalendarLabels } from "./date-range-calendar";
+import { type OverviewPeriod } from "./periods";
+export interface PeriodValue {
+    period: OverviewPeriod;
+    from?: string;
+    to?: string;
+}
+export interface PeriodLabels {
+    period: Record<OverviewPeriod, string>;
+    back: string;
+    reset: string;
+    calendar: DateRangeCalendarLabels;
+}
+export declare const englishPeriodLabels: PeriodLabels;
+export declare function readStoredPeriod(key: string): PeriodValue;
+export declare function writeStoredPeriod(key: string, value: PeriodValue): void;
+export declare function useStoredPeriod(key: string): [PeriodValue, (value: PeriodValue) => void];
+export declare function PeriodPicker({ value, onChange, className, labels, formatDay, locale, }: {
+    value: PeriodValue;
+    onChange: (value: PeriodValue) => void;
+    className?: string;
+    labels?: PeriodLabels;
+    formatDay: (iso: string) => string;
+    locale?: string;
+}): import("react").JSX.Element;

package/dist/components/dashboard/period-picker.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Check, ChevronDown, ChevronLeft } from "lucide-react";
+import { Button } from "../../ui/button.js";
+import { DateRangeCalendar, englishDateRangeCalendarLabels, } from "./date-range-calendar.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.js";
+import { isOverviewPeriod, OVERVIEW_PERIOD_DEFAULT, OVERVIEW_PERIODS, } from "./periods.js";
+import { cn } from "../../lib/class-names.js";
+export const englishPeriodLabels = {
+    period: {
+        all: "All time",
+        custom: "Custom range",
+        last30Days: "Last 30 days",
+        currentMonth: "This month",
+        lastMonth: "Last month",
+        last6Months: "Last 6 months",
+        last12Months: "Last 12 months",
+        currentYear: "This year",
+        lastYear: "Last year",
+    },
+    back: "Back",
+    reset: "Reset",
+    calendar: englishDateRangeCalendarLabels,
+};
+const PRESETS = OVERVIEW_PERIODS.filter((period) => period !== "custom");
+const STORAGE_PREFIX = "hub-kit.overview-period.";
+export function readStoredPeriod(key) {
+    if (typeof window === "undefined")
+        return { period: OVERVIEW_PERIOD_DEFAULT };
+    try {
+        const raw = window.localStorage.getItem(STORAGE_PREFIX + key);
+        if (raw) {
+            const parsed = JSON.parse(raw);
+            if (isOverviewPeriod(parsed?.period)) {
+                return { period: parsed.period, from: parsed.from, to: parsed.to };
+            }
+        }
+    }
+    catch {
+    }
+    return { period: OVERVIEW_PERIOD_DEFAULT };
+}
+export function writeStoredPeriod(key, value) {
+    try {
+        window.localStorage.setItem(STORAGE_PREFIX + key, JSON.stringify(value));
+    }
+    catch {
+    }
+}
+export function useStoredPeriod(key) {
+    const [value, setValue] = useState(() => readStoredPeriod(key));
+    const set = (next) => {
+        setValue(next);
+        writeStoredPeriod(key, next);
+    };
+    return [value, set];
+}
+export function PeriodPicker({ value, onChange, className, labels = englishPeriodLabels, formatDay, locale = "en", }) {
+    const [open, setOpen] = useState(false);
+    const [customOpen, setCustomOpen] = useState(false);
+    const isCustom = value.period === "custom";
+    const label = isCustom && value.from && value.to
+        ? `${formatDay(value.from)} – ${formatDay(value.to)}`
+        : labels.period[value.period];
+    return (_jsxs(Popover, { open: open, onOpenChange: (nextOpen) => {
+            setOpen(nextOpen);
+            if (nextOpen) {
+                setCustomOpen(isCustom);
+            }
+        }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "ghost", className: cn("h-6 gap-1 px-1.5 text-[0.7rem] font-normal text-muted-foreground hover:text-foreground", className), children: [label, _jsx(ChevronDown, { className: "size-3 opacity-60" })] }) }), _jsx(PopoverContent, { align: "end", className: "w-auto p-1", children: customOpen ? (_jsx("div", { className: "p-2", children: _jsx(DateRangeCalendar, { open: open, from: value.from ?? "", to: value.to ?? "", locale: locale, labels: labels.calendar, footerExtra: _jsxs("button", { type: "button", onClick: () => setCustomOpen(false), className: "flex cursor-pointer items-center gap-1 rounded-md px-2 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", children: [_jsx(ChevronLeft, { className: "size-3" }), labels.back] }), onApply: (from, to) => {
+                            if (!from || !to) {
+                                onChange({ period: OVERVIEW_PERIOD_DEFAULT, from: undefined, to: undefined });
+                            }
+                            else {
+                                onChange({ period: "custom", from, to });
+                            }
+                            setOpen(false);
+                        } }) })) : (_jsxs("div", { className: "flex flex-col", children: [PRESETS.map((period) => (_jsxs("button", { type: "button", onClick: () => {
+                                onChange({ period, from: undefined, to: undefined });
+                                setOpen(false);
+                            }, className: cn("flex cursor-pointer items-center justify-between gap-4 rounded-md px-2 py-1.5 text-left text-xs whitespace-nowrap transition-colors hover:bg-muted", period === value.period && "font-medium"), children: [labels.period[period], period === value.period && _jsx(Check, { className: "size-3" })] }, period))), _jsx("div", { className: "my-1 h-px bg-border" }), _jsxs("button", { type: "button", onClick: () => setCustomOpen(true), className: cn("flex cursor-pointer items-center justify-between gap-4 rounded-md px-2 py-1.5 text-left text-xs whitespace-nowrap transition-colors hover:bg-muted", isCustom && "font-medium"), children: [labels.period.custom, isCustom && _jsx(Check, { className: "size-3" })] })] })) })] }));
+}

package/dist/components/dashboard/periods.d.ts

@@ -0,0 +1,13 @@
+export declare const OVERVIEW_PERIODS: readonly ["all", "custom", "last30Days", "currentMonth", "lastMonth", "last6Months", "last12Months", "currentYear", "lastYear"];
+export type OverviewPeriod = (typeof OVERVIEW_PERIODS)[number];
+export declare const OVERVIEW_PERIOD_DEFAULT: OverviewPeriod;
+export declare function isOverviewPeriod(value: unknown): value is OverviewPeriod;
+export interface PeriodRange {
+    from: string | null;
+    to: string | null;
+}
+export declare function overviewPeriodRange(period: OverviewPeriod, today?: Date, custom?: {
+    from?: string | null;
+    to?: string | null;
+}): PeriodRange;
+export declare function previousPeriodRange(range: PeriodRange): PeriodRange;

package/dist/components/dashboard/periods.js

@@ -0,0 +1,63 @@
+export const OVERVIEW_PERIODS = [
+    "all",
+    "custom",
+    "last30Days",
+    "currentMonth",
+    "lastMonth",
+    "last6Months",
+    "last12Months",
+    "currentYear",
+    "lastYear",
+];
+export const OVERVIEW_PERIOD_DEFAULT = "last30Days";
+export function isOverviewPeriod(value) {
+    return OVERVIEW_PERIODS.includes(value);
+}
+const toIsoDate = (date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+export function overviewPeriodRange(period, today = new Date(), custom) {
+    const year = today.getFullYear();
+    const month = today.getMonth();
+    switch (period) {
+        case "all":
+            return { from: null, to: null };
+        case "custom":
+            return { from: custom?.from || null, to: custom?.to || null };
+        case "last30Days": {
+            const to = new Date(year, month, today.getDate());
+            const from = new Date(to);
+            from.setDate(from.getDate() - 29);
+            return { from: toIsoDate(from), to: toIsoDate(to) };
+        }
+        case "currentMonth":
+            return { from: toIsoDate(new Date(year, month, 1)), to: toIsoDate(new Date(year, month + 1, 0)) };
+        case "lastMonth":
+            return { from: toIsoDate(new Date(year, month - 1, 1)), to: toIsoDate(new Date(year, month, 0)) };
+        case "last6Months":
+            return {
+                from: toIsoDate(new Date(year, month - 5, 1)),
+                to: toIsoDate(new Date(year, month + 1, 0)),
+            };
+        case "last12Months":
+            return {
+                from: toIsoDate(new Date(year, month - 11, 1)),
+                to: toIsoDate(new Date(year, month + 1, 0)),
+            };
+        case "currentYear":
+            return { from: `${year}-01-01`, to: `${year}-12-31` };
+        case "lastYear":
+            return { from: `${year - 1}-01-01`, to: `${year - 1}-12-31` };
+    }
+}
+export function previousPeriodRange(range) {
+    if (!range.from || !range.to)
+        return { from: null, to: null };
+    const from = new Date(`${range.from}T00:00:00Z`);
+    const to = new Date(`${range.to}T00:00:00Z`);
+    if (Number.isNaN(from.getTime()) || Number.isNaN(to.getTime()))
+        return { from: null, to: null };
+    const days = Math.round((to.getTime() - from.getTime()) / 86_400_000) + 1;
+    const previousTo = new Date(from.getTime() - 86_400_000);
+    const previousFrom = new Date(previousTo.getTime() - (days - 1) * 86_400_000);
+    const toUtcIso = (date) => date.toISOString().slice(0, 10);
+    return { from: toUtcIso(previousFrom), to: toUtcIso(previousTo) };
+}

package/dist/components/dashboard/pipeline-stages-panel.d.ts

@@ -0,0 +1,14 @@
+import { type StageTile } from "./stage-tiles";
+import { type PeriodLabels, type PeriodValue } from "./period-picker";
+export declare function PipelineStagesPanel({ title, stages, loading, error, period, onPeriodChange, periodLabels, formatDay, className, dataTour, }: {
+    title: string;
+    stages: StageTile[];
+    loading: boolean;
+    error?: boolean;
+    period: PeriodValue;
+    onPeriodChange: (value: PeriodValue) => void;
+    periodLabels?: PeriodLabels;
+    formatDay: (iso: string) => string;
+    className?: string;
+    dataTour?: string;
+}): import("react").JSX.Element | null;

package/dist/components/dashboard/pipeline-stages-panel.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DashboardPanel } from "./panel.js";
+import { StageTiles } from "./stage-tiles.js";
+import { PeriodPicker } from "./period-picker.js";
+export function PipelineStagesPanel({ title, stages, loading, error, period, onPeriodChange, periodLabels, formatDay, className, dataTour, }) {
+    if (error)
+        return null;
+    const total = stages.reduce((sum, stage) => sum + stage.count, 0);
+    if (!loading && total === 0)
+        return null;
+    return (_jsx(DashboardPanel, { title: title, headerRight: _jsx(PeriodPicker, { value: period, onChange: onPeriodChange, labels: periodLabels, formatDay: formatDay }), className: className, dataTour: dataTour, children: _jsx(StageTiles, { stages: stages, loading: loading }) }));
+}

package/dist/components/dashboard/processing-summary-panel.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+import { type PeriodLabels, type PeriodValue } from "./period-picker";
+export interface ProcessingSummary {
+    processed: number;
+    recognized: number;
+    needsReview: number;
+    errors: number;
+    channels: {
+        label: string;
+        count: number;
+    }[];
+    lastRunLabel: string | null;
+}
+export declare function ProcessingSummaryPanel({ title, seeAllLabel, seeAllTo, summary, loading, error, labels, period, onPeriodChange, periodLabels, formatDay, className, dataTour, }: {
+    title: string;
+    seeAllLabel: string;
+    seeAllTo: string;
+    summary: ProcessingSummary | undefined;
+    loading: boolean;
+    error?: boolean;
+    labels: {
+        processed: string;
+        recognized: string;
+        needsReview: string;
+        errors: string;
+        channelsPrefix: string;
+    };
+    period: PeriodValue;
+    onPeriodChange: (value: PeriodValue) => void;
+    periodLabels?: PeriodLabels;
+    formatDay: (iso: string) => string;
+    className?: string;
+    dataTour?: string;
+}): ReactNode;

package/dist/components/dashboard/processing-summary-panel.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Link } from "@tanstack/react-router";
+import { DashboardPanel } from "./panel.js";
+import { StatTile } from "./stat-tile.js";
+import { PeriodPicker } from "./period-picker.js";
+export function ProcessingSummaryPanel({ title, seeAllLabel, seeAllTo, summary, loading, error, labels, period, onPeriodChange, periodLabels, formatDay, className, dataTour, }) {
+    if (error)
+        return null;
+    const value = (n) => (loading || n === undefined ? "—" : String(n));
+    return (_jsxs(DashboardPanel, { title: title, headerRight: _jsxs(_Fragment, { children: [_jsx(Link, { to: seeAllTo, className: "text-xs font-medium text-brand-dark hover:underline", children: seeAllLabel }), _jsx(PeriodPicker, { value: period, onChange: onPeriodChange, labels: periodLabels, formatDay: formatDay })] }), className: className, dataTour: dataTour, children: [_jsxs("div", { className: "mt-3 grid flex-1 grid-cols-2 gap-2", children: [_jsx(StatTile, { to: seeAllTo, label: labels.processed, value: value(summary?.processed) }), _jsx(StatTile, { to: seeAllTo, label: labels.recognized, value: value(summary?.recognized) }), _jsx(StatTile, { to: seeAllTo, label: labels.needsReview, value: value(summary?.needsReview), valueCls: summary && summary.needsReview > 0 ? "text-warning" : undefined }), _jsx(StatTile, { to: seeAllTo, label: labels.errors, value: value(summary?.errors), valueCls: summary && summary.errors > 0 ? "text-danger" : undefined })] }), _jsxs("div", { className: "mt-auto flex flex-wrap items-center justify-between gap-x-3 gap-y-0.5 pt-2", children: [summary && summary.channels.length > 0 && (_jsxs("p", { className: "text-xs text-muted-foreground", children: [labels.channelsPrefix, " ", summary.channels.map((c) => `${c.label} ${c.count}`).join(" · ")] })), summary?.lastRunLabel && (_jsx("p", { className: "text-xs text-muted-foreground", children: summary.lastRunLabel }))] })] }));
+}

package/dist/components/dashboard/ranked-bars.d.ts

@@ -0,0 +1,15 @@
+export interface RankedBarRow {
+    key: string;
+    label: string;
+    valueText: string;
+    sharePct: number;
+    link?: {
+        to: string;
+        params?: Record<string, string>;
+        search?: Record<string, unknown>;
+    };
+}
+export declare function RankedBars({ rows }: {
+    rows: RankedBarRow[];
+}): import("react").JSX.Element | null;
+export declare function RankedBarsSkeleton(): import("react").JSX.Element;

package/dist/components/dashboard/ranked-bars.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Link } from "@tanstack/react-router";
+import { Skeleton } from "../../ui/skeleton.js";
+import { cn } from "../../lib/class-names.js";
+const BAR_TINTS = ["bg-chart-1", "bg-chart-2", "bg-chart-3", "bg-chart-4", "bg-chart-5"];
+export function RankedBars({ rows }) {
+    if (rows.length === 0)
+        return null;
+    return (_jsx("ol", { className: "mt-3 space-y-1.5", children: rows.map((row, index) => {
+            const body = (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-5 shrink-0 text-xs tabular-nums text-muted-foreground", children: String(index + 1).padStart(2, "0") }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "flex items-baseline justify-between gap-2", children: [_jsx("span", { className: "truncate text-sm text-foreground", children: row.label }), _jsx("span", { className: "shrink-0 text-sm font-medium tabular-nums text-foreground", children: row.valueText })] }), _jsx("span", { className: "mt-1 block h-1.5 w-full overflow-hidden rounded-full bg-brand-tint", children: _jsx("span", { className: cn("block h-full rounded-full", BAR_TINTS[index % BAR_TINTS.length]), style: { width: `${Math.min(Math.max(row.sharePct, 2), 100)}%` } }) })] }), _jsxs("span", { className: "w-12 shrink-0 rounded-md border border-border px-1.5 py-0.5 text-center text-[0.7rem] font-medium tabular-nums text-muted-foreground", children: [row.sharePct.toFixed(0), " %"] })] }));
+            return (_jsx("li", { children: row.link ? (_jsx(Link, { to: row.link.to, params: row.link.params, search: row.link.search, className: "flex items-center gap-3 rounded-lg px-1 py-0.5 transition-colors hover:bg-brand-tint/50", children: body })) : (_jsx("span", { className: "flex items-center gap-3 px-1 py-0.5", children: body })) }, row.key));
+        }) }));
+}
+export function RankedBarsSkeleton() {
+    return (_jsx("div", { className: "mt-3 space-y-2", children: Array.from({ length: 5 }, (_, index) => (_jsxs("div", { className: "flex items-center gap-3 px-1 py-0.5", children: [_jsx(Skeleton, { className: "h-4 w-5" }), _jsxs("div", { className: "min-w-0 flex-1 space-y-1.5", children: [_jsx(Skeleton, { className: "h-4 w-3/4" }), _jsx(Skeleton, { className: "h-1.5 w-full rounded-full" })] }), _jsx(Skeleton, { className: "h-5 w-12 rounded-md" })] }, index))) }));
+}

package/dist/components/dashboard/ranked-list-panel.d.ts

@@ -0,0 +1,14 @@
+import { type RankedBarRow } from "./ranked-bars";
+import { type PeriodLabels, type PeriodValue } from "./period-picker";
+export declare function RankedListPanel({ title, totalLabel, rows, loading, period, onPeriodChange, periodLabels, formatDay, className, dataTour, }: {
+    title: string;
+    totalLabel?: string;
+    rows: RankedBarRow[];
+    loading: boolean;
+    period: PeriodValue;
+    onPeriodChange: (value: PeriodValue) => void;
+    periodLabels?: PeriodLabels;
+    formatDay: (iso: string) => string;
+    className?: string;
+    dataTour?: string;
+}): import("react").JSX.Element | null;

package/dist/components/dashboard/ranked-list-panel.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DashboardPanel } from "./panel.js";
+import { RankedBars, RankedBarsSkeleton } from "./ranked-bars.js";
+import { PeriodPicker } from "./period-picker.js";
+export function RankedListPanel({ title, totalLabel, rows, loading, period, onPeriodChange, periodLabels, formatDay, className, dataTour, }) {
+    if (!loading && rows.length === 0)
+        return null;
+    return (_jsx(DashboardPanel, { title: title, titleExtra: totalLabel, headerRight: _jsx(PeriodPicker, { value: period, onChange: onPeriodChange, labels: periodLabels, formatDay: formatDay }), className: className, dataTour: dataTour, children: loading ? _jsx(RankedBarsSkeleton, {}) : _jsx(RankedBars, { rows: rows }) }));
+}

package/dist/components/dashboard/stage-tiles.d.ts

@@ -0,0 +1,15 @@
+export interface StageTile {
+    key: string;
+    label: string;
+    count: number;
+    tileClassName?: string;
+    labelClassName?: string;
+    link: {
+        to: string;
+        search?: Record<string, unknown>;
+    };
+}
+export declare function StageTiles({ stages, loading }: {
+    stages: StageTile[];
+    loading: boolean;
+}): import("react").JSX.Element;

package/dist/components/dashboard/stage-tiles.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link } from "@tanstack/react-router";
+import { cn } from "../../lib/class-names.js";
+export function StageTiles({ stages, loading }) {
+    return (_jsx("div", { className: "mt-3 grid flex-1 auto-rows-fr grid-cols-2 gap-2 sm:grid-cols-3", children: stages.map((stage) => (_jsxs(Link, { to: stage.link.to, search: stage.link.search, className: cn("flex flex-col justify-center rounded-xl p-2.5 transition-opacity hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", stage.tileClassName), children: [_jsx("div", { className: cn("truncate text-sm font-medium", stage.labelClassName), children: stage.label }), _jsx("div", { className: "mt-0.5 text-2xl font-semibold tracking-tight tabular-nums text-foreground", children: loading ? "—" : stage.count })] }, stage.key))) }));
+}

package/dist/components/dashboard/stat-rows-panel.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+import type { LucideIcon } from "lucide-react";
+export interface StatRowConfig {
+    key: string;
+    to: string;
+    search?: Record<string, unknown>;
+    icon: LucideIcon;
+    iconClassName: string;
+    label: string;
+    value: string;
+    valueClassName?: string;
+}
+export declare function StatRowsPanel({ title, rows, loading, emptyText, footerLink, headerRight, className, dataTour, }: {
+    title: string;
+    rows: StatRowConfig[];
+    loading?: boolean;
+    emptyText?: string;
+    footerLink?: {
+        to: string;
+        label: string;
+    };
+    headerRight?: ReactNode;
+    className?: string;
+    dataTour?: string;
+}): import("react").JSX.Element;

package/dist/components/dashboard/stat-rows-panel.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link } from "@tanstack/react-router";
+import { DashboardPanel } from "./panel.js";
+import { StatRow } from "./stat-tile.js";
+export function StatRowsPanel({ title, rows, loading, emptyText, footerLink, headerRight, className, dataTour, }) {
+    return (_jsxs(DashboardPanel, { title: title, headerRight: headerRight, className: className, dataTour: dataTour, children: [!loading && rows.length === 0 && emptyText ? (_jsx("p", { className: "mt-3 text-sm text-muted-foreground", children: emptyText })) : (_jsx("div", { className: "mt-3 flex flex-1 flex-col gap-1.5", children: rows.map((row) => (_jsx(StatRow, { to: row.to, search: row.search, icon: row.icon, iconCls: row.iconClassName, label: row.label, value: loading ? "—" : row.value, valueCls: row.valueClassName }, row.key))) })), footerLink && (_jsx(Link, { to: footerLink.to, className: "mt-auto pt-2 text-sm font-medium text-brand-dark hover:underline", children: footerLink.label }))] }));
+}

package/dist/components/dashboard/stat-tile.d.ts

@@ -0,0 +1,20 @@
+import type { LucideIcon } from "lucide-react";
+export declare function StatTile({ to, search, icon: Icon, iconCls, label, value, valueCls, className, }: {
+    to: string;
+    search?: Record<string, unknown>;
+    icon?: LucideIcon;
+    iconCls?: string;
+    label: string;
+    value: string;
+    valueCls?: string;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function StatRow({ to, search, icon: Icon, iconCls, label, value, valueCls, }: {
+    to: string;
+    search?: Record<string, unknown>;
+    icon: LucideIcon;
+    iconCls: string;
+    label: string;
+    value: string;
+    valueCls?: string;
+}): import("react").JSX.Element;

package/dist/components/dashboard/stat-tile.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link } from "@tanstack/react-router";
+import { cn } from "../../lib/class-names.js";
+export function StatTile({ to, search, icon: Icon, iconCls, label, value, valueCls, className, }) {
+    return (_jsxs(Link, { to: to, search: search, className: cn("flex min-w-0 flex-col justify-center gap-1 rounded-lg px-2 py-1.5 transition-colors hover:bg-card/70", className), children: [_jsxs("span", { className: "flex min-w-0 items-center gap-1.5", title: label, children: [Icon && (_jsx("span", { className: cn("inline-flex size-5 shrink-0 items-center justify-center rounded-md text-white", iconCls), children: _jsx(Icon, { className: "size-3" }) })), _jsx("span", { className: "truncate text-sm font-medium text-muted-foreground", children: label })] }), _jsx("span", { className: cn("text-2xl font-semibold tracking-tight tabular-nums text-foreground", valueCls), children: value })] }));
+}
+export function StatRow({ to, search, icon: Icon, iconCls, label, value, valueCls, }) {
+    return (_jsxs(Link, { to: to, search: search, className: "flex items-center gap-2.5 rounded-lg px-2 py-1.5 transition-colors hover:bg-card/70", children: [_jsx("span", { className: cn("inline-flex size-6 shrink-0 items-center justify-center rounded-md text-white", iconCls), children: _jsx(Icon, { className: "size-3.5" }) }), _jsx("span", { className: "min-w-0 flex-1 truncate text-sm text-muted-foreground", title: label, children: label }), _jsx("span", { className: cn("shrink-0 text-base font-semibold tabular-nums text-foreground", valueCls), children: value })] }));
+}

package/dist/components/feedback/index.d.ts

@@ -0,0 +1,4 @@
+export { ErrorState, EmptyState, TableSkeleton, CardsSkeleton, readableErrorMessage, englishErrorStateLabels, } from "./query-states";
+export type { ErrorStateLabels } from "./query-states";
+export { TablePagination, PAGE_SIZES, englishPaginationLabels } from "./table-pagination";
+export type { PaginationLabels } from "./table-pagination";

package/dist/components/feedback/index.js

@@ -0,0 +1,2 @@
+export { ErrorState, EmptyState, TableSkeleton, CardsSkeleton, readableErrorMessage, englishErrorStateLabels, } from "./query-states.js";
+export { TablePagination, PAGE_SIZES, englishPaginationLabels } from "./table-pagination.js";

package/dist/components/feedback/query-states.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+export interface ErrorStateLabels {
+    title: string;
+    unknownError: string;
+    retry: string;
+}
+export declare const englishErrorStateLabels: ErrorStateLabels;
+export declare function readableErrorMessage(error: unknown, fallback: string): string;
+export declare function ErrorState({ error, onRetry, labels, className, }: {
+    error: unknown;
+    onRetry?: () => void;
+    labels?: ErrorStateLabels;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function EmptyState({ title, hint, action, className, }: {
+    title: string;
+    hint?: string;
+    action?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function TableSkeleton({ rows, columns }: {
+    rows?: number;
+    columns?: number;
+}): import("react").JSX.Element;
+export declare function CardsSkeleton({ count }: {
+    count?: number;
+}): import("react").JSX.Element;

package/dist/components/feedback/query-states.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertTriangle, Inbox } from "lucide-react";
+import { Skeleton } from "../../ui/skeleton.js";
+import { Button } from "../../ui/button.js";
+import { cn } from "../../lib/class-names.js";
+export const englishErrorStateLabels = {
+    title: "Something went wrong.",
+    unknownError: "Unknown error.",
+    retry: "Try again",
+};
+// Supabase rejects with a plain object, not an Error, so read its message field too.
+export function readableErrorMessage(error, fallback) {
+    if (error instanceof Error && error.message)
+        return error.message;
+    if (typeof error === "string" && error)
+        return error;
+    if (error && typeof error === "object") {
+        const errorObject = error;
+        const message = typeof errorObject.message === "string" ? errorObject.message : null;
+        if (message) {
+            const code = typeof errorObject.code === "string" ? errorObject.code : null;
+            return code ? `${message} (${code})` : message;
+        }
+    }
+    return fallback;
+}
+export function ErrorState({ error, onRetry, labels = englishErrorStateLabels, className, }) {
+    return (_jsxs("div", { className: cn("flex flex-col items-center justify-center rounded-xl border border-destructive/30 bg-destructive/5 px-6 py-12 text-center", className), children: [_jsx("span", { className: "grid size-12 place-items-center rounded-full bg-destructive/10 text-destructive", children: _jsx(AlertTriangle, { className: "size-6" }) }), _jsx("h2", { className: "mt-4 text-base font-semibold text-foreground", children: labels.title }), _jsx("p", { className: "mt-1 max-w-md text-sm text-muted-foreground", children: readableErrorMessage(error, labels.unknownError) }), onRetry && (_jsx(Button, { variant: "outline", className: "mt-4", onClick: onRetry, children: labels.retry }))] }));
+}
+export function EmptyState({ title, hint, action, className, }) {
+    return (_jsxs("div", { className: cn("flex flex-col items-center justify-center rounded-xl border border-dashed border-border bg-card px-6 py-12 text-center", className), children: [_jsx("span", { className: "grid size-12 place-items-center rounded-full bg-muted text-muted-foreground", children: _jsx(Inbox, { className: "size-6" }) }), _jsx("h2", { className: "mt-4 text-base font-semibold text-foreground", children: title }), hint && _jsx("p", { className: "mt-1 max-w-md text-sm text-muted-foreground", children: hint }), action && _jsx("div", { className: "mt-4", children: action })] }));
+}
+export function TableSkeleton({ rows = 6, columns = 5 }) {
+    return (_jsx("div", { className: "overflow-hidden rounded-xl border border-border bg-card", children: _jsx("div", { className: "divide-y divide-border", children: Array.from({ length: rows }).map((_, rowIndex) => (_jsx("div", { className: "flex items-center gap-4 px-4 py-3", children: Array.from({ length: columns }).map((_, columnIndex) => (_jsx(Skeleton, { className: cn("h-4", columnIndex === 0 ? "w-40" : "flex-1") }, columnIndex))) }, rowIndex))) }) }));
+}
+export function CardsSkeleton({ count = 4 }) {
+    return (_jsx("div", { className: "grid grid-cols-2 gap-3 lg:grid-cols-4", children: Array.from({ length: count }).map((_, index) => (_jsx(Skeleton, { className: "h-24 rounded-xl" }, index))) }));
+}