@hub-kit/core 0.3.0

package/dist/pages/invoice-detail/review.js

@@ -0,0 +1,310 @@
+export const VALIDATION_GATES = [
+    "brutto_vorhanden",
+    "steller_vorhanden",
+    "datum_vorhanden",
+    "rechnungsnr_vorhanden",
+    "summe_ok",
+    "ust_satz_ok",
+    "iban_ok",
+    "datum_plausibel",
+];
+export const SEVERITY_INFORMATIONAL = "informational";
+export const SEVERITY_ACTION_REQUIRED = "action_required";
+export function reviewChecks(invoice) {
+    const raw = invoice.extracted?.review_checks;
+    return Array.isArray(raw) && raw.length > 0 ? raw : null;
+}
+export const VALIDATION_FIELD_REASON = {
+    gross_present: "brutto_fehlt",
+    issuer_present: "steller_fehlt",
+    sum_matches: "summe_stimmt_nicht",
+    vat_rate_valid: "ust_satz_ungueltig",
+    iban_checksum_valid: "iban_ungueltig",
+    date_not_future: "datum_zukunft",
+    invoice_number_present: "rechnungsnr_fehlt",
+    date_present: "datum_fehlt",
+    payable_iban_present: "iban_fehlt",
+    recipient_present: "empfaenger_fehlt",
+    iban_unambiguous: "iban_mehrere",
+    relevance_ok: "nicht_relevant",
+    assignment_resolved: "gesellschaft_fehlt",
+    brutto_vorhanden: "brutto_fehlt",
+    steller_vorhanden: "steller_fehlt",
+    summe_ok: "summe_stimmt_nicht",
+    ust_satz_ok: "ust_satz_ungueltig",
+    iban_ok: "iban_ungueltig",
+    datum_plausibel: "datum_zukunft",
+    rechnungsnr_vorhanden: "rechnungsnr_fehlt",
+    datum_vorhanden: "datum_fehlt",
+    iban_vorhanden: "iban_fehlt",
+    empfaenger_vorhanden: "empfaenger_fehlt",
+};
+export const REVIEW_CHECK_REASON = {
+    extraction_confidence: "konfidenz_unter_schwelle",
+    relevance: "nicht_relevant",
+    document_readable: "nicht_lesbar",
+    exclusion: "ausgeschlossen",
+    brutto_vorhanden: "brutto_fehlt",
+    steller_vorhanden: "steller_fehlt",
+    summe_ok: "summe_stimmt_nicht",
+    ust_satz_ok: "ust_satz_ungueltig",
+    iban_ok: "iban_ungueltig",
+    datum_plausibel: "datum_zukunft",
+    rechnungsnr_vorhanden: "rechnungsnr_fehlt",
+    datum_vorhanden: "datum_fehlt",
+    empfaenger_name: "empfaenger_fehlt",
+    assignment: "gesellschaft_fehlt",
+    safety_invariant_1: "keine_ueberweisung_belegt",
+    safety_invariant_2: "lastschrift_erkannt",
+    safety_invariant_3: "ocr_ohne_sichtpruefung",
+    safety_invariant_4a: "keine_rechnung_bestaetigt",
+    safety_invariant_4b: "konfidenz_unter_sicherheitsgrenze",
+    safety_invariant_5: "zahlungsnachweis_veraltet",
+    forced_review: "manuell_markiert",
+};
+function reasonForReviewCheck(check) {
+    if (check.field === "iban_anzahl") {
+        return Number(check.values?.iban_count ?? 0) > 1 ? "iban_mehrere" : "iban_fehlt";
+    }
+    return REVIEW_CHECK_REASON[check.field ?? ""] ?? null;
+}
+function reviewCheckCounts(check) {
+    return (check.severity ?? "").trim().toLowerCase() !== SEVERITY_INFORMATIONAL;
+}
+const VALIDATION_MODIFIER = new Set(["kleinbetrag", "is_small_amount"]);
+function detailFailed(entry) {
+    const s = (entry?.status ?? "").trim().toLowerCase();
+    if (!s)
+        return false;
+    return s !== "ok" && s !== "not_applicable" && s !== "skipped";
+}
+function usableDetail(raw) {
+    if (!raw || typeof raw !== "object" || Array.isArray(raw))
+        return null;
+    const detail = raw;
+    return Object.keys(detail).length > 0 ? detail : null;
+}
+export const SOURCE_HUMAN = "human";
+export function isManuallyCorrected(entry) {
+    return entry?.source === SOURCE_HUMAN;
+}
+const KEY_PIPELINE = "bookkeeping_edits";
+const KEY_CORRECTION = "user_edits";
+function half(raw, name) {
+    if (!raw || typeof raw !== "object" || Array.isArray(raw))
+        return null;
+    return usableDetail(raw[name]);
+}
+function isSplit(raw) {
+    if (!raw || typeof raw !== "object" || Array.isArray(raw))
+        return false;
+    return KEY_PIPELINE in raw;
+}
+function rawDetail(invoice) {
+    if (invoice.validation_detail && Object.keys(invoice.validation_detail).length > 0) {
+        return invoice.validation_detail;
+    }
+    return invoice.extracted?.validation_detail;
+}
+export function validationBase(invoice) {
+    const raw = rawDetail(invoice);
+    return isSplit(raw) ? half(raw, KEY_PIPELINE) : usableDetail(raw);
+}
+export function validationCorrections(invoice) {
+    return half(rawDetail(invoice), KEY_CORRECTION);
+}
+export function validationDetail(invoice) {
+    const base = validationBase(invoice);
+    const corrections = validationCorrections(invoice);
+    if (!corrections)
+        return base;
+    return { ...(base ?? {}), ...corrections };
+}
+export function writeValidationDetail(base, corrections) {
+    return {
+        [KEY_PIPELINE]: base ?? {},
+        [KEY_CORRECTION]: corrections ?? {},
+    };
+}
+export function validationFlat(invoice) {
+    const fromExtracted = invoice.extracted?.validation;
+    if (fromExtracted && typeof fromExtracted === "object")
+        return fromExtracted;
+    return (invoice.validation ?? {});
+}
+export function reviewReasonsDetail(invoice) {
+    const detail = validationDetail(invoice);
+    if (detail) {
+        const known = Object.keys(VALIDATION_FIELD_REASON);
+        const fields = [...known, ...Object.keys(detail).filter((f) => !known.includes(f))];
+        const out = [];
+        for (const field of fields) {
+            if (VALIDATION_MODIFIER.has(field))
+                continue;
+            const entry = detail[field];
+            if (!detailFailed(entry))
+                continue;
+            out.push({
+                id: VALIDATION_FIELD_REASON[field] ?? null,
+                field,
+                message: entry?.message?.trim() || undefined,
+                values: entry?.values,
+            });
+        }
+        return out;
+    }
+    const checks = reviewChecks(invoice);
+    if (checks) {
+        return checks
+            .filter((c) => reviewCheckCounts(c) && detailFailed(c))
+            .map((c) => ({
+            id: reasonForReviewCheck(c),
+            field: c.field ?? "",
+            severity: c.severity,
+            message: c.message?.trim() || undefined,
+            values: c.values,
+        }));
+    }
+    const flat = validationFlat(invoice);
+    const reasons = [];
+    const smallAmount = flat.kleinbetrag === true;
+    const push = (field) => reasons.push({ id: VALIDATION_FIELD_REASON[field], field });
+    if (flat.brutto_vorhanden === false)
+        push("brutto_vorhanden");
+    if (flat.steller_vorhanden === false)
+        push("steller_vorhanden");
+    if (flat.summe_ok === false)
+        push("summe_ok");
+    if (flat.ust_satz_ok === false)
+        push("ust_satz_ok");
+    if (flat.iban_ok === false)
+        push("iban_ok");
+    if (flat.datum_plausibel === false)
+        push("datum_plausibel");
+    if (!smallAmount && flat.rechnungsnr_vorhanden === false)
+        push("rechnungsnr_vorhanden");
+    if (!smallAmount && flat.datum_vorhanden === false)
+        push("datum_vorhanden");
+    return reasons;
+}
+export function reviewReasonNumbers(reason) {
+    if (reason.field !== "summe_ok")
+        return null;
+    const num = (v) => {
+        const n = typeof v === "string" ? Number(v) : v;
+        return typeof n === "number" && Number.isFinite(n) ? n : null;
+    };
+    const expected = num(reason.values?.expected);
+    const found = num(reason.values?.found);
+    if (expected == null || found == null)
+        return null;
+    return { expected, found };
+}
+function detailPassed(status) {
+    return (status ?? "").trim().toLowerCase() === "ok";
+}
+export function buildReviewSummary(invoice) {
+    const reasons = reviewReasonsDetail(invoice);
+    const detail = validationDetail(invoice);
+    if (detail) {
+        const known = Object.keys(VALIDATION_FIELD_REASON);
+        const fields = [...known, ...Object.keys(detail).filter((f) => !known.includes(f))];
+        const passed = fields
+            .filter((f) => !VALIDATION_MODIFIER.has(f) && detailPassed(detail[f]?.status))
+            .map((f) => ({ field: f, id: VALIDATION_FIELD_REASON[f] ?? null }));
+        return { reasons, passed };
+    }
+    const checks = reviewChecks(invoice);
+    if (checks) {
+        const passed = checks
+            .filter((c) => reviewCheckCounts(c) && detailPassed(c.status))
+            .map((c) => ({ field: c.field ?? "", id: reasonForReviewCheck(c) }));
+        return { reasons, passed };
+    }
+    const flat = validationFlat(invoice);
+    const passed = VALIDATION_GATES.filter((gate) => flat[gate] === true).map((gate) => ({
+        field: gate,
+        id: VALIDATION_FIELD_REASON[gate] ?? null,
+    }));
+    return { reasons, passed };
+}
+export function reviewReasonConfidence(reason) {
+    if (reason.field !== "extraction_confidence")
+        return null;
+    const share = (v) => {
+        const n = typeof v === "string" ? Number(v) : v;
+        return typeof n === "number" && Number.isFinite(n) ? Math.round(n * 100) : null;
+    };
+    const found = share(reason.values?.found);
+    const required = share(reason.values?.required);
+    if (found == null || required == null)
+        return null;
+    return { found, required };
+}
+export function reviewReasonIbanCount(reason) {
+    if (reason.field !== "iban_anzahl")
+        return null;
+    const n = Number(reason.values?.iban_count ?? 0);
+    return Number.isFinite(n) && n > 1 ? n : null;
+}
+export function reviewReasonIds(invoice) {
+    return reviewReasonsDetail(invoice)
+        .map((r) => r.id)
+        .filter((id) => id != null);
+}
+export function reviewScore(invoice) {
+    let score = reviewReasonIds(invoice).length * 10;
+    if (invoice.status === "zu_pruefen")
+        score += 5;
+    const confidence = invoice.extracted?.konfidenz;
+    if (confidence) {
+        const values = Object.values(confidence).filter((n) => typeof n === "number");
+        if (values.length > 0) {
+            const min = Math.min(...values);
+            if (min < 0.8)
+                score += 3;
+            else if (min < 0.95)
+                score += 1;
+        }
+    }
+    return score;
+}
+export function withoutEmDash(text) {
+    return text
+        .replace(/\s*[—–]\s*$/g, "")
+        .replace(/\s*[—–]\s*/g, ", ")
+        .replace(/\s+,/g, ",")
+        .trim();
+}
+export function reviewLines(reasons, labels, jumpTargets) {
+    return reasons.map((r) => {
+        const confidence = reviewReasonConfidence(r);
+        const ibanCount = reviewReasonIbanCount(r);
+        const numbers = reviewReasonNumbers(r);
+        const label = labels.gateLabel(r.field);
+        return {
+            field: r.field,
+            title: label || undefined,
+            text: r.field === "relevance_ok" && r.message
+                ? withoutEmDash(r.message)
+                : r.id
+                    ? labels.reasonText(r.id, {
+                        confidence: confidence ?? undefined,
+                        ibanCount: ibanCount ?? undefined,
+                    })
+                    : r.message
+                        ? withoutEmDash(r.message)
+                        : labels.gateHint(r.field),
+            numbers: numbers ? labels.sumComparison(labels.formatMoney(numbers.expected), labels.formatMoney(numbers.found)) : undefined,
+            severity: r.severity,
+            jumpTo: jumpTargets[r.field],
+        };
+    });
+}
+export function reviewCheckLabelDe(field, labelDe) {
+    return labelDe(field) ?? field;
+}
+export function hasNoReviewChecks(invoice) {
+    const summary = buildReviewSummary(invoice);
+    return summary.reasons.length === 0 && summary.passed.length === 0;
+}

package/dist/pages/invoice-list/badges.d.ts

@@ -0,0 +1,23 @@
+export declare function ConfidenceBadge({ score, label }: {
+    score: number | null;
+    label: (score: number | null) => string;
+}): import("react").JSX.Element;
+export declare function VatBadge({ vatRate, label }: {
+    vatRate: number | null;
+    label: (vatRate: number) => string;
+}): import("react").JSX.Element | null;
+export declare function PaymentBadge({ paidAt, paidLabel, openLabel }: {
+    paidAt: string | null;
+    paidLabel: string;
+    openLabel: string;
+}): import("react").JSX.Element;
+export declare function CompanyChip({ code, placeholder }: {
+    code: string | null;
+    placeholder: string;
+}): import("react").JSX.Element;
+export declare function BankMatchBadge({ hasConfirmed, hasSuggested, confirmedLabel, suggestedLabel, }: {
+    hasConfirmed?: boolean;
+    hasSuggested?: boolean;
+    confirmedLabel: string;
+    suggestedLabel: string;
+}): import("react").JSX.Element | null;

package/dist/pages/invoice-list/badges.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Landmark } from "lucide-react";
+import { cn } from "../../lib/class-names.js";
+export function ConfidenceBadge({ score, label }) {
+    if (score == null) {
+        return _jsx("span", { className: "text-xs text-muted-foreground", children: label(null) });
+    }
+    const tone = score >= 0.95 ? "bg-emerald-500" : score >= 0.8 ? "bg-amber-500" : "bg-red-500";
+    return (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx("span", { className: cn("size-2 shrink-0 rounded-full", tone) }), label(score)] }));
+}
+export function VatBadge({ vatRate, label }) {
+    if (!vatRate || vatRate <= 0)
+        return null;
+    return (_jsx("span", { className: "inline-flex items-center rounded-md bg-teal-100 px-1.5 py-0.5 text-xs font-medium text-teal-800", children: label(vatRate) }));
+}
+export function PaymentBadge({ paidAt, paidLabel, openLabel }) {
+    return (_jsx("span", { className: cn("inline-flex items-center rounded-md px-1.5 py-0.5 text-xs font-medium", paidAt ? "bg-emerald-100 text-emerald-800" : "bg-muted text-muted-foreground"), children: paidAt ? paidLabel : openLabel }));
+}
+export function CompanyChip({ code, placeholder }) {
+    return (_jsx("span", { className: "inline-flex items-center rounded-md border border-border bg-muted/50 px-1.5 py-0.5 font-mono text-xs font-medium text-foreground", children: code ?? placeholder }));
+}
+export function BankMatchBadge({ hasConfirmed, hasSuggested, confirmedLabel, suggestedLabel, }) {
+    if (!hasConfirmed && !hasSuggested)
+        return null;
+    return (_jsxs("span", { className: cn("inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-xs font-medium", hasConfirmed ? "bg-emerald-100 text-emerald-800" : "bg-amber-100 text-amber-800"), children: [hasConfirmed ? _jsx(Check, { className: "size-3 shrink-0" }) : _jsx(Landmark, { className: "size-3 shrink-0" }), hasConfirmed ? confirmedLabel : suggestedLabel] }));
+}

package/dist/pages/invoice-list/index.d.ts

@@ -0,0 +1,5 @@
+export { InvoiceListPage, InvoiceListLoadingSkeleton } from "./invoice-list-page";
+export type { InvoiceListPageProps } from "./invoice-list-page";
+export { englishInvoiceListLabels } from "./labels";
+export type { InvoiceListLabels } from "./labels";
+export { ConfidenceBadge, VatBadge, PaymentBadge, CompanyChip, BankMatchBadge } from "./badges";

package/dist/pages/invoice-list/index.js

@@ -0,0 +1,3 @@
+export { InvoiceListPage, InvoiceListLoadingSkeleton } from "./invoice-list-page.js";
+export { englishInvoiceListLabels } from "./labels.js";
+export { ConfidenceBadge, VatBadge, PaymentBadge, CompanyChip, BankMatchBadge } from "./badges.js";

package/dist/pages/invoice-list/invoice-list-page.d.ts

@@ -0,0 +1,13 @@
+import type { InvoiceListAdapter, InvoiceListConfig } from "../../adapters/invoice-list";
+import { type OutgoingInvoiceLabels } from "../invoice-detail/OutgoingInvoiceFlag";
+import { type ReviewBadgeLabels } from "../invoice-detail/ReviewBadge";
+import { type InvoiceListLabels } from "./labels";
+export interface InvoiceListPageProps {
+    adapter: InvoiceListAdapter;
+    config: InvoiceListConfig;
+    labels?: InvoiceListLabels;
+    reviewLabels?: ReviewBadgeLabels;
+    outgoingLabels?: OutgoingInvoiceLabels;
+}
+export declare function InvoiceListPage({ adapter, config, labels, reviewLabels, outgoingLabels, }: InvoiceListPageProps): import("react").JSX.Element;
+export declare function InvoiceListLoadingSkeleton(): import("react").JSX.Element;

package/dist/pages/invoice-list/invoice-list-page.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Search } from "lucide-react";
+import { Input } from "../../ui/input.js";
+import { Combobox } from "../../ui/combobox.js";
+import { Skeleton } from "../../ui/skeleton.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../ui/table.js";
+import { ErrorState, TableSkeleton } from "../../components/feedback/query-states.js";
+import { TablePagination } from "../../components/feedback/table-pagination.js";
+import { QueueKpiRow } from "../../components/invoice-queue/index.js";
+import { cn } from "../../lib/class-names.js";
+import { isOutgoingInvoice, OutgoingInvoiceBadge } from "../invoice-detail/OutgoingInvoiceFlag.js";
+import { reviewReasonIds, hasNoReviewChecks } from "../invoice-detail/review.js";
+import { ReviewBadge } from "../invoice-detail/ReviewBadge.js";
+import { ConfidenceBadge, VatBadge, PaymentBadge, CompanyChip, BankMatchBadge } from "./badges.js";
+import { SortControl } from "./sort-control.js";
+import { useTableView } from "./use-table-view.js";
+import { englishInvoiceListLabels } from "./labels.js";
+const DEFAULT_REVIEW_LABELS = {
+    none: "Reviewed",
+    duplicate: "Duplicate",
+    excluded: "Excluded",
+    alreadyPaid: "Already paid",
+    needed: "Needs review",
+};
+const DEFAULT_OUTGOING_LABELS = {
+    banner: (issuer, recipient) => `Outgoing invoice: from ${issuer} to ${recipient}.`,
+    bannerShort: "Outgoing",
+    unknownIssuer: "unknown issuer",
+    unknownRecipient: "unknown recipient",
+};
+export function InvoiceListPage({ adapter, config, labels = englishInvoiceListLabels, reviewLabels = DEFAULT_REVIEW_LABELS, outgoingLabels = DEFAULT_OUTGOING_LABELS, }) {
+    const invoicesQuery = adapter.useInvoices();
+    const queueCardsQuery = adapter.useQueueCards?.();
+    const companyOptionsQuery = adapter.useCompanyOptions?.();
+    const [search, setSearch] = useState("");
+    const [company, setCompany] = useState("");
+    const [activeQueueCard, setActiveQueueCard] = useState(null);
+    const rows = useMemo(() => invoicesQuery.data ?? [], [invoicesQuery.data]);
+    const queueCards = useMemo(() => {
+        if (!config.queueCards || !queueCardsQuery?.data)
+            return [];
+        const counts = new Map(queueCardsQuery.data.map((c) => [c.key, c]));
+        return config.queueCards
+            .filter((spec) => counts.has(spec.key))
+            .map((spec) => {
+            const counted = counts.get(spec.key);
+            return {
+                key: spec.key,
+                label: spec.key,
+                description: "",
+                count: String(counted.count),
+                amount: adapter.formatMoney(counted.amount),
+                tone: spec.tone,
+                icon: spec.icon,
+                active: activeQueueCard === spec.key,
+                onSelect: () => setActiveQueueCard((prev) => (prev === spec.key ? null : spec.key)),
+            };
+        });
+    }, [config.queueCards, queueCardsQuery?.data, activeQueueCard, adapter]);
+    const filteredRows = useMemo(() => {
+        const term = search.trim().toLowerCase();
+        const activeCardSpec = config.queueCards?.find((c) => c.key === activeQueueCard);
+        return rows.filter((row) => {
+            if (company && row.companyCode !== company)
+                return false;
+            if (activeCardSpec && !activeCardSpec.filter(row))
+                return false;
+            if (!term)
+                return true;
+            return `${row.issuer ?? ""} ${row.invoiceNumber ?? ""}`.toLowerCase().includes(term);
+        });
+    }, [rows, search, company, activeQueueCard, config.queueCards]);
+    const view = useTableView(filteredRows, {
+        initialSort: "documentDate",
+        initialDirection: "desc",
+        resetKey: `${search}|${company}|${activeQueueCard}`,
+        sortValue: (row, key) => {
+            switch (key) {
+                case "issuer":
+                    return row.issuer ?? "";
+                case "amount":
+                    return row.amountGross ?? 0;
+                case "dueDate":
+                    return row.dueDate ?? "";
+                default:
+                    return row.documentDate ?? "";
+            }
+        },
+    });
+    const sortColumns = [
+        { value: "issuer", label: labels.columnIssuer },
+        { value: "amount", label: labels.columnAmount },
+        { value: "documentDate", label: labels.columnDate },
+        { value: "dueDate", label: labels.columnDueOn("") },
+    ];
+    const companyOptions = companyOptionsQuery?.data ?? [];
+    const heading = config.direction === "incoming" ? labels.incoming : labels.outgoing;
+    const showBankMatch = config.showBankMatch ?? true;
+    const showConfidence = config.showConfidence ?? true;
+    return (_jsxs("div", { children: [_jsxs("div", { children: [_jsx("h1", { className: "mt-2 text-2xl font-semibold tracking-tight text-foreground", children: heading.title }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: heading.subtitle })] }), queueCards.length > 0 && _jsx(QueueKpiRow, { cards: queueCards, loading: queueCardsQuery?.loading, className: "mt-6" }), _jsxs("div", { className: "mt-6 flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "relative w-full max-w-sm", children: [_jsx(Search, { className: "absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), placeholder: labels.searchPlaceholder, className: "pl-9" })] }), companyOptions.length > 0 && (_jsx(Combobox, { value: company, onValueChange: setCompany, className: "w-full sm:w-48", options: [
+                            { value: "", label: labels.companyAll },
+                            ...companyOptions.map((c) => ({ value: c.code, label: `${c.code} — ${c.name}` })),
+                        ] })), _jsx(SortControl, { columns: sortColumns, sort: view.sort, direction: view.direction, onSort: view.setSort, onDirection: view.setDirection, labels: labels })] }), invoicesQuery.error ? (_jsx("div", { className: "mt-4", children: _jsx(ErrorState, { error: invoicesQuery.error, onRetry: () => { } }) })) : invoicesQuery.loading ? (_jsx("div", { className: "mt-4", children: _jsx(TableSkeleton, { rows: 8, columns: 7 }) })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "mt-4 hidden overflow-hidden overflow-x-auto rounded-xl border border-border bg-card sm:block", children: _jsxs(Table, { className: "min-w-[1100px]", children: [_jsx(TableHeader, { children: _jsxs(TableRow, { className: "bg-muted/40", children: [_jsx(TableHead, { children: labels.columnIssuer }), _jsx(TableHead, { children: labels.columnCompany }), _jsx(TableHead, { className: "text-right", children: labels.columnAmount }), _jsx(TableHead, { children: labels.columnDate }), showConfidence && _jsx(TableHead, { children: labels.columnConfidence }), _jsx(TableHead, { children: labels.columnReview }), _jsx(TableHead, { children: labels.columnPayment }), showBankMatch && _jsx(TableHead, { children: labels.columnBankMatch })] }) }), _jsxs(TableBody, { children: [view.pageRows.map((row) => (_jsx(InvoiceRow, { row: row, adapter: adapter, labels: labels, reviewLabels: reviewLabels, outgoingLabels: outgoingLabels, showBankMatch: showBankMatch, showConfidence: showConfidence }, row.id))), view.total === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 8, className: "py-12 text-center text-muted-foreground", children: labels.empty }) }))] })] }) }), _jsx("div", { className: "mt-4 space-y-3 sm:hidden", children: view.total === 0 ? (_jsx("p", { className: "rounded-xl border border-border bg-card px-4 py-12 text-center text-sm text-muted-foreground", children: labels.empty })) : (view.pageRows.map((row) => (_jsx(InvoiceCard, { row: row, adapter: adapter, labels: labels, outgoingLabels: outgoingLabels }, row.id)))) })] })), !invoicesQuery.error && !invoicesQuery.loading && view.total > 0 && (_jsx(TablePagination, { page: view.page, totalPages: view.totalPages, pageSize: view.pageSize, total: view.total, from: view.from, to: view.to, onPage: view.setPage, onPageSize: view.setPageSize }))] }));
+}
+function InvoiceRow({ row, adapter, labels, reviewLabels, outgoingLabels, showBankMatch, showConfidence, }) {
+    return (_jsxs(TableRow, { className: "cursor-pointer", onClick: () => adapter.openInvoice(row.id), children: [_jsxs(TableCell, { className: "max-w-[280px]", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "truncate font-medium text-foreground", title: row.issuer ?? "", children: row.issuer ?? "—" }), _jsx(OutgoingInvoiceBadge, { invoice: { extracted: row.extracted, issuer: row.issuer, recipient_name: null }, labels: outgoingLabels })] }), _jsxs("div", { className: "truncate text-xs text-muted-foreground", children: [row.invoiceNumber ? labels.invoiceNumber(row.invoiceNumber) : labels.noInvoiceNumber, row.costCategory ? ` · ${row.costCategory}` : ""] })] }), _jsx(TableCell, { children: _jsx(CompanyChip, { code: row.companyCode, placeholder: "\u2014" }) }), _jsxs(TableCell, { className: "text-right tabular-nums", children: [_jsx("span", { className: "block font-medium", children: adapter.formatMoney(row.amountGross) }), _jsx("span", { className: "mt-0.5 block", children: _jsx(VatBadge, { vatRate: row.vatRate, label: labels.vat }) })] }), _jsxs(TableCell, { className: "whitespace-nowrap text-sm text-muted-foreground tabular-nums", children: [_jsx("span", { className: "block", children: adapter.formatDate(row.documentDate) }), row.dueDate && !row.paidAt && (_jsx("span", { className: cn("block text-xs", new Date(row.dueDate) < new Date() && "text-destructive"), children: labels.columnDueOn(adapter.formatDate(row.dueDate)) }))] }), showConfidence && (_jsx(TableCell, { children: _jsx(ConfidenceBadge, { score: row.confidenceScore, label: (score) => (score == null ? labels.confidenceUnknown : labels.confidenceScore(Math.round(score * 100))) }) })), _jsx(TableCell, { children: _jsx(ReviewBadge, { reasonCount: reviewReasonIds(row).length, unchecked: hasNoReviewChecks(row), status: row.status, alreadyPaid: !!row.paidAt, labels: reviewLabels }) }), _jsx(TableCell, { children: _jsx(PaymentBadge, { paidAt: row.paidAt, paidLabel: labels.paid, openLabel: labels.open }) }), showBankMatch && (_jsx(TableCell, { children: _jsx(BankMatchBadge, { hasConfirmed: row.hasConfirmedBankMatch, hasSuggested: row.hasSuggestedBankMatch, confirmedLabel: labels.bankMatchConfirmed, suggestedLabel: labels.bankMatchSuggested }) }))] }));
+}
+function InvoiceCard({ row, adapter, labels, outgoingLabels, }) {
+    return (_jsxs("div", { className: "cursor-pointer rounded-xl border border-border bg-card p-4", onClick: () => adapter.openInvoice(row.id), children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "truncate font-medium text-foreground", children: row.issuer ?? "—" }), isOutgoingInvoice(row) && (_jsx(OutgoingInvoiceBadge, { invoice: { extracted: row.extracted, issuer: row.issuer, recipient_name: null }, labels: outgoingLabels }))] }), _jsx("div", { className: "mt-0.5 text-sm text-muted-foreground", children: row.invoiceNumber ? labels.invoiceNumber(row.invoiceNumber) : labels.noInvoiceNumber })] }), _jsxs("div", { className: "shrink-0 text-right", children: [_jsx("div", { className: "font-medium tabular-nums text-foreground", children: adapter.formatMoney(row.amountGross) }), _jsx("div", { className: "text-xs text-muted-foreground", children: adapter.formatDate(row.documentDate) })] })] }), _jsxs("div", { className: "mt-3 flex items-center justify-between border-t border-border pt-2 text-xs text-muted-foreground", children: [_jsx(CompanyChip, { code: row.companyCode, placeholder: "\u2014" }), _jsx(PaymentBadge, { paidAt: row.paidAt, paidLabel: labels.paid, openLabel: labels.open })] })] }));
+}
+export function InvoiceListLoadingSkeleton() {
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(Skeleton, { className: "h-8 w-64" }), _jsx(Skeleton, { className: "h-24 w-full rounded-xl" }), _jsx(TableSkeleton, { rows: 8, columns: 7 })] }));
+}

package/dist/pages/invoice-list/labels.d.ts

@@ -0,0 +1,36 @@
+export interface InvoiceListLabels {
+    incoming: {
+        title: string;
+        subtitle: string;
+    };
+    outgoing: {
+        title: string;
+        subtitle: string;
+    };
+    searchPlaceholder: string;
+    companyAll: string;
+    companyPlaceholder: string;
+    columnIssuer: string;
+    columnCompany: string;
+    columnAmount: string;
+    columnDate: string;
+    columnDueOn: (date: string) => string;
+    columnConfidence: string;
+    columnReview: string;
+    columnPayment: string;
+    columnBankMatch: string;
+    invoiceNumber: (nr: string) => string;
+    noInvoiceNumber: string;
+    confidenceUnknown: string;
+    confidenceScore: (percent: number) => string;
+    vat: (rate: number) => string;
+    paid: string;
+    open: string;
+    bankMatchConfirmed: string;
+    bankMatchSuggested: string;
+    empty: string;
+    sortLabel: string;
+    sortAscending: string;
+    sortDescending: string;
+}
+export declare const englishInvoiceListLabels: InvoiceListLabels;

package/dist/pages/invoice-list/labels.js

@@ -0,0 +1,29 @@
+export const englishInvoiceListLabels = {
+    incoming: { title: "Incoming invoices", subtitle: "Invoices billed to you, from your suppliers." },
+    outgoing: { title: "Outgoing invoices", subtitle: "Invoices you issued to your customers." },
+    searchPlaceholder: "Search issuer or invoice number",
+    companyAll: "All companies",
+    companyPlaceholder: "Company",
+    columnIssuer: "Issuer",
+    columnCompany: "Company",
+    columnAmount: "Amount",
+    columnDate: "Date",
+    columnDueOn: (date) => `Due ${date}`,
+    columnConfidence: "Confidence",
+    columnReview: "Review",
+    columnPayment: "Payment",
+    columnBankMatch: "Bank match",
+    invoiceNumber: (nr) => `No. ${nr}`,
+    noInvoiceNumber: "No invoice number",
+    confidenceUnknown: "Unknown",
+    confidenceScore: (percent) => `${percent}%`,
+    vat: (rate) => `VAT ${rate}%`,
+    paid: "Paid",
+    open: "Open",
+    bankMatchConfirmed: "Matched",
+    bankMatchSuggested: "Suggested match",
+    empty: "No invoices found.",
+    sortLabel: "Sort by",
+    sortAscending: "Ascending",
+    sortDescending: "Descending",
+};

package/dist/pages/invoice-list/sort-control.d.ts

@@ -0,0 +1,17 @@
+import type { SortDirection } from "./use-table-view";
+export interface SortColumn {
+    value: string;
+    label: string;
+}
+export declare function SortControl({ columns, sort, direction, onSort, onDirection, labels, }: {
+    columns: SortColumn[];
+    sort: string;
+    direction: SortDirection;
+    onSort: (key: string) => void;
+    onDirection: (direction: SortDirection) => void;
+    labels: {
+        sortLabel: string;
+        sortAscending: string;
+        sortDescending: string;
+    };
+}): import("react").JSX.Element;

package/dist/pages/invoice-list/sort-control.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Combobox } from "../../ui/combobox.js";
+export function SortControl({ columns, sort, direction, onSort, onDirection, labels, }) {
+    return (_jsxs("div", { className: "flex w-full flex-wrap items-center gap-2 sm:w-auto", children: [_jsx("span", { className: "hidden shrink-0 text-sm text-muted-foreground sm:inline", children: labels.sortLabel }), _jsx(Combobox, { value: sort, onValueChange: onSort, className: "w-full sm:w-48", options: columns }), _jsx(Combobox, { value: direction, onValueChange: (value) => onDirection(value), className: "w-full sm:w-40", options: [
+                    { value: "asc", label: labels.sortAscending },
+                    { value: "desc", label: labels.sortDescending },
+                ] })] }));
+}

package/dist/pages/invoice-list/use-table-view.d.ts

@@ -0,0 +1,23 @@
+export type SortDirection = "asc" | "desc";
+export interface TableView<Row> {
+    pageRows: Row[];
+    sort: string;
+    direction: SortDirection;
+    setSort: (key: string) => void;
+    setDirection: (direction: SortDirection) => void;
+    page: number;
+    setPage: (page: number) => void;
+    pageSize: number;
+    setPageSize: (size: number) => void;
+    total: number;
+    totalPages: number;
+    from: number;
+    to: number;
+}
+export declare function useTableView<Row>(rows: Row[], options: {
+    sortValue: (row: Row, key: string) => string | number;
+    initialSort: string;
+    initialDirection?: SortDirection;
+    initialPageSize?: number;
+    resetKey?: string;
+}): TableView<Row>;