@hub-kit/core 0.3.0

package/dist/pages/bank-sync-log/BankSyncLogPage.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { RefreshCw } from "lucide-react";
+import { Button } from "../../ui/button.js";
+import { Input } from "../../ui/input.js";
+import { Combobox } from "../../ui/combobox.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 { cn } from "../../lib/class-names.js";
+import { englishBankSyncLogLabels } from "./labels.js";
+const ALL = "__all";
+const REFRESH_OPTIONS = ["0", "60000", "300000", "900000"];
+function formatCountdown(ms) {
+    const total = Math.ceil(ms / 1000);
+    return `${Math.floor(total / 60)}:${String(total % 60).padStart(2, "0")}`;
+}
+function countsSummary(counts, countLabel) {
+    if (!counts)
+        return "—";
+    const parts = Object.entries(counts)
+        .filter(([, v]) => typeof v === "number" && Number.isFinite(v))
+        .map(([k, v]) => `${v} ${countLabel(k)}`);
+    return parts.length > 0 ? parts.join(" · ") : "—";
+}
+export function BankSyncLogPage({ adapter, labels = englishBankSyncLogLabels }) {
+    const [event, setEvent] = useState(ALL);
+    const [level, setLevel] = useState(ALL);
+    const [connectionId, setConnectionId] = useState(ALL);
+    const [from, setFrom] = useState("");
+    const [to, setTo] = useState("");
+    const [refresh, setRefresh] = useState("60000");
+    const [page, setPage] = useState(1);
+    const [pageSize] = useState(25);
+    useEffect(() => {
+        setPage(1);
+    }, [event, level, connectionId, from, to]);
+    const refreshMs = Number(refresh) || 0;
+    const facetsQuery = adapter.useFacets();
+    const connectionsQuery = adapter.useConnections();
+    const logsQuery = adapter.useLogsPage({
+        event: event === ALL ? undefined : event,
+        level: level === ALL ? undefined : level,
+        connectionId: connectionId === ALL ? undefined : connectionId,
+        from: from || undefined,
+        to: to || undefined,
+        page,
+        pageSize,
+        refreshMs,
+    });
+    const rows = logsQuery.data?.rows ?? [];
+    const total = logsQuery.data?.total ?? 0;
+    const totalPages = Math.max(1, Math.ceil(total / pageSize));
+    const rowFrom = total === 0 ? 0 : (page - 1) * pageSize + 1;
+    const rowTo = Math.min(page * pageSize, total);
+    const [now, setNow] = useState(() => Date.now());
+    useEffect(() => {
+        if (!refreshMs)
+            return;
+        const id = window.setInterval(() => setNow(Date.now()), 1000);
+        return () => window.clearInterval(id);
+    }, [refreshMs]);
+    const nextIn = refreshMs && logsQuery.dataUpdatedAt ? Math.max(0, refreshMs - (now - logsQuery.dataUpdatedAt)) : null;
+    const connectionLabel = useMemo(() => new Map(connectionsQuery.data.map((c) => [c.id, c.label])), [connectionsQuery.data]);
+    const eventOptions = [{ value: ALL, label: labels.allEvents }, ...(facetsQuery.data?.events ?? []).map((e) => ({ value: e, label: adapter.eventLabel(e) }))];
+    const levelOptions = [{ value: ALL, label: labels.allLevels }, ...(facetsQuery.data?.levels ?? []).map((l) => ({ value: l, label: l }))];
+    const connectionOptions = [{ value: ALL, label: labels.allConnections }, ...connectionsQuery.data.map((c) => ({ value: c.id, label: c.label }))];
+    const refreshOptions = REFRESH_OPTIONS.map((v) => ({ value: v, label: v === "0" ? labels.refreshOff : labels.refreshEvery(Number(v) / 60000) }));
+    const hasActiveFilter = event !== ALL || level !== ALL || connectionId !== ALL || !!from || !!to;
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex flex-wrap items-end justify-between gap-3", children: [_jsx("h1", { className: "mt-2 text-2xl font-semibold tracking-tight text-foreground", children: labels.title }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [nextIn !== null && (_jsx("span", { className: "text-xs text-muted-foreground tabular-nums", children: logsQuery.isFetching ? labels.refreshing : labels.nextRefreshIn(formatCountdown(nextIn)) })), _jsx(Combobox, { value: refresh, onValueChange: setRefresh, options: [...refreshOptions], className: "h-8 w-full sm:w-[150px]" }), _jsxs(Button, { variant: "outline", size: "sm", className: "gap-2", disabled: logsQuery.isFetching, onClick: () => logsQuery.refetch(), children: [_jsx(RefreshCw, { className: cn("size-4", logsQuery.isFetching && "animate-spin") }), labels.refreshNow] })] })] }), _jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: [_jsx(Combobox, { value: event, onValueChange: setEvent, options: eventOptions, className: "h-9 w-full sm:w-[210px]" }), _jsx(Combobox, { value: level, onValueChange: setLevel, options: levelOptions, className: "h-9 w-full sm:w-[150px]" }), _jsx(Combobox, { value: connectionId, onValueChange: setConnectionId, options: connectionOptions, className: "h-9 w-full sm:w-[220px]" }), _jsx(Input, { type: "date", value: from, max: to || undefined, onChange: (e) => setFrom(e.target.value), "aria-label": labels.fromLabel, className: "h-9 w-full sm:w-[150px]" }), _jsx(Input, { type: "date", value: to, min: from || undefined, onChange: (e) => setTo(e.target.value), "aria-label": labels.toLabel, className: "h-9 w-full sm:w-[150px]" }), hasActiveFilter && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
+                            setEvent(ALL);
+                            setLevel(ALL);
+                            setConnectionId(ALL);
+                            setFrom("");
+                            setTo("");
+                        }, children: labels.resetFilters }))] }), logsQuery.error ? (_jsx("div", { className: "mt-3", children: _jsx(ErrorState, { error: logsQuery.error, onRetry: () => logsQuery.refetch() }) })) : !logsQuery.data ? (_jsx("div", { className: "mt-3", children: _jsx(TableSkeleton, { rows: 8, columns: 5 }) })) : (_jsx("div", { className: "mt-3 overflow-hidden overflow-x-auto rounded-xl border border-border bg-card", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { className: "bg-muted/40", children: [_jsx(TableHead, { children: labels.columnTime }), _jsx(TableHead, { children: labels.columnEvent }), _jsx(TableHead, { children: labels.columnLevel }), _jsx(TableHead, { children: labels.columnConnection }), _jsx(TableHead, { children: labels.columnDetails })] }) }), _jsxs(TableBody, { children: [rows.map((row) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "whitespace-nowrap text-sm text-muted-foreground", children: adapter.formatDateTime(row.createdAt) }), _jsx(TableCell, { className: "text-sm text-foreground", children: adapter.eventLabel(row.event) }), _jsx(TableCell, { children: _jsx("span", { className: cn("inline-flex items-center rounded-md px-1.5 py-0.5 text-xs font-medium", row.level === "error" ? "bg-red-100 text-red-800" : row.level === "warn" ? "bg-amber-100 text-amber-800" : "bg-muted text-muted-foreground"), children: row.level }) }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: row.connectionId ? (connectionLabel.get(row.connectionId) ?? row.connectionId.slice(0, 8)) : "—" }), _jsx(TableCell, { className: "max-w-[360px] truncate text-sm text-muted-foreground", children: row.counts ? countsSummary(row.counts, adapter.countLabel) : (row.message ?? "—") })] }, row.id))), rows.length === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5, className: "py-12 text-center text-muted-foreground", children: labels.empty }) }))] })] }) })), logsQuery.data && total > 0 && (_jsx(TablePagination, { page: page, totalPages: totalPages, pageSize: pageSize, total: total, from: rowFrom, to: rowTo, onPage: setPage, onPageSize: () => { } }))] }));
+}

package/dist/pages/bank-sync-log/index.d.ts

@@ -0,0 +1,4 @@
+export { BankSyncLogPage } from "./BankSyncLogPage";
+export type { BankSyncLogPageProps } from "./BankSyncLogPage";
+export { englishBankSyncLogLabels } from "./labels";
+export type { BankSyncLogLabels } from "./labels";

package/dist/pages/bank-sync-log/index.js

@@ -0,0 +1,2 @@
+export { BankSyncLogPage } from "./BankSyncLogPage.js";
+export { englishBankSyncLogLabels } from "./labels.js";

package/dist/pages/bank-sync-log/labels.d.ts

@@ -0,0 +1,21 @@
+export interface BankSyncLogLabels {
+    title: string;
+    allEvents: string;
+    allLevels: string;
+    allConnections: string;
+    fromLabel: string;
+    toLabel: string;
+    resetFilters: string;
+    refreshOff: string;
+    refreshEvery: (minutes: number) => string;
+    refreshNow: string;
+    refreshing: string;
+    nextRefreshIn: (time: string) => string;
+    columnTime: string;
+    columnEvent: string;
+    columnLevel: string;
+    columnConnection: string;
+    columnDetails: string;
+    empty: string;
+}
+export declare const englishBankSyncLogLabels: BankSyncLogLabels;

package/dist/pages/bank-sync-log/labels.js

@@ -0,0 +1,20 @@
+export const englishBankSyncLogLabels = {
+    title: "Bank sync log",
+    allEvents: "All events",
+    allLevels: "All levels",
+    allConnections: "All connections",
+    fromLabel: "From",
+    toLabel: "To",
+    resetFilters: "Reset filters",
+    refreshOff: "No auto-refresh",
+    refreshEvery: (minutes) => `Every ${minutes} min`,
+    refreshNow: "Refresh now",
+    refreshing: "Refreshing…",
+    nextRefreshIn: (time) => `Next refresh in ${time}`,
+    columnTime: "Time",
+    columnEvent: "Event",
+    columnLevel: "Level",
+    columnConnection: "Connection",
+    columnDetails: "Details",
+    empty: "No log entries in this range.",
+};

package/dist/pages/bank-transactions/BankMatchPanel.d.ts

@@ -0,0 +1,8 @@
+import type { BankReconciliationAdapter, BankTransactionRecord } from "../../adapters/bank-reconciliation";
+import type { BankTransactionsLabels } from "./labels";
+export declare function BankMatchPanel({ transaction, onClose, adapter, labels, }: {
+    transaction: BankTransactionRecord | null;
+    onClose: () => void;
+    adapter: BankReconciliationAdapter;
+    labels: BankTransactionsLabels;
+}): import("react").JSX.Element;

package/dist/pages/bank-transactions/BankMatchPanel.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Search } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "../../ui/button.js";
+import { Input } from "../../ui/input.js";
+import { Textarea } from "../../ui/textarea.js";
+import { Skeleton } from "../../ui/skeleton.js";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "../../ui/sheet.js";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, } from "../../ui/dialog.js";
+import { Combobox } from "../../ui/combobox.js";
+import { readableErrorMessage } from "../../components/feedback/query-states.js";
+import { cn } from "../../lib/class-names.js";
+export function BankMatchPanel({ transaction, onClose, adapter, labels, }) {
+    const [manualOpen, setManualOpen] = useState(false);
+    const [query, setQuery] = useState("");
+    const [results, setResults] = useState([]);
+    const [searching, setSearching] = useState(false);
+    const [noReceiptOpen, setNoReceiptOpen] = useState(false);
+    const [noReceiptReason, setNoReceiptReason] = useState("");
+    const candidatesQuery = adapter.useCandidates(transaction?.id ?? "");
+    const open = transaction != null;
+    async function confirm(invoiceId) {
+        if (!transaction)
+            return;
+        try {
+            await adapter.confirmMatch(transaction.id, invoiceId);
+            toast.success(labels.matchConfirmed);
+            onClose();
+        }
+        catch (error) {
+            toast.error(readableErrorMessage(error, ""));
+        }
+    }
+    async function reject(invoiceId) {
+        if (!transaction)
+            return;
+        try {
+            await adapter.rejectMatch(transaction.id, invoiceId);
+            toast.success(labels.matchRejected);
+        }
+        catch (error) {
+            toast.error(readableErrorMessage(error, ""));
+        }
+    }
+    async function runSearch(value) {
+        setQuery(value);
+        if (!adapter.manualSearch || value.trim().length < 2) {
+            setResults([]);
+            return;
+        }
+        setSearching(true);
+        try {
+            setResults(await adapter.manualSearch.search(value.trim()));
+        }
+        finally {
+            setSearching(false);
+        }
+    }
+    async function confirmNoReceipt() {
+        if (!transaction || !adapter.noReceipt)
+            return;
+        try {
+            await adapter.noReceipt.mark(transaction.id, noReceiptReason);
+            toast.success(labels.noReceiptMarked);
+            setNoReceiptOpen(false);
+            setNoReceiptReason("");
+            onClose();
+        }
+        catch (error) {
+            toast.error(readableErrorMessage(error, ""));
+        }
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Sheet, { open: open, onOpenChange: (next) => !next && onClose(), children: _jsxs(SheetContent, { side: "right", className: "w-full sm:max-w-md", children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: labels.panelTitle }), transaction && (_jsxs(SheetDescription, { children: [adapter.formatMoney(transaction.amount), " \u00B7 ", transaction.counterparty_holder ?? "—", " \u00B7", " ", adapter.formatDate(transaction.booking_date)] }))] }), _jsxs("div", { className: "mt-4 space-y-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: labels.candidatesTitle }), candidatesQuery.loading ? (_jsxs("div", { className: "mt-2 space-y-2", children: [_jsx(Skeleton, { className: "h-20 w-full rounded-lg" }), _jsx(Skeleton, { className: "h-20 w-full rounded-lg" })] })) : candidatesQuery.data.length === 0 ? (_jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: labels.candidatesEmpty })) : (_jsx("ul", { className: "mt-2 space-y-2", children: candidatesQuery.data.map((candidate) => (_jsxs("li", { className: "rounded-lg border border-border bg-card p-3", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm font-medium text-foreground", children: candidate.issuer ?? "—" }), _jsxs("div", { className: "mt-0.5 text-xs text-muted-foreground", children: [adapter.formatMoney(candidate.amount), " \u00B7 ", adapter.formatDate(candidate.documentDate), candidate.invoiceNumber ? ` · #${candidate.invoiceNumber}` : ""] })] }), candidate.score != null && (_jsx("span", { className: "shrink-0 rounded-md bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground", children: labels.scoreLabel(Math.round(candidate.score)) }))] }), _jsxs("div", { className: "mt-2 flex justify-end gap-3", children: [_jsx("button", { type: "button", className: "text-xs font-medium text-muted-foreground hover:text-destructive", onClick: () => reject(candidate.invoiceId), children: labels.candidateReject }), _jsx("button", { type: "button", className: "text-xs font-medium text-brand-dark hover:underline", onClick: () => confirm(candidate.invoiceId), children: labels.candidateConfirm })] })] }, candidate.invoiceId))) }))] }), adapter.manualSearch && (_jsxs("div", { children: [_jsxs("button", { type: "button", className: "flex items-center gap-1.5 text-sm font-medium text-muted-foreground hover:text-foreground", onClick: () => setManualOpen((v) => !v), children: [_jsx(Search, { className: "size-3.5" }), labels.manualSearchToggle] }), manualOpen && (_jsxs("div", { className: "mt-2 space-y-2", children: [_jsx(Input, { value: query, onChange: (event) => runSearch(event.target.value), placeholder: labels.manualSearchPlaceholder }), searching ? (_jsx(Skeleton, { className: "h-16 w-full rounded-lg" })) : results.length === 0 && query.trim().length >= 2 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: labels.manualSearchEmpty })) : (_jsx("ul", { className: "space-y-2", children: results.map((result) => (_jsxs("li", { className: "flex items-center justify-between rounded-lg border border-border p-2 text-sm", children: [_jsx("span", { className: "truncate", children: result.issuer ?? "—" }), _jsx("button", { type: "button", className: "shrink-0 text-xs font-medium text-brand-dark hover:underline", onClick: () => confirm(result.id), children: labels.candidateConfirm })] }, result.id))) }))] }))] })), adapter.noReceipt && (_jsx("div", { className: cn("border-t border-border pt-4"), children: transaction?.no_receipt_reason ? (_jsx(Button, { variant: "outline", size: "sm", onClick: () => transaction && adapter.noReceipt.clear(transaction.id), children: labels.noReceiptClear })) : (_jsx(Button, { variant: "outline", size: "sm", onClick: () => setNoReceiptOpen(true), children: labels.noReceiptButton })) }))] })] }) }), _jsx(Dialog, { open: noReceiptOpen, onOpenChange: setNoReceiptOpen, children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: labels.noReceiptDialogTitle }) }), adapter.noReceipt && adapter.noReceipt.reasons.length > 0 ? (_jsx(Combobox, { value: noReceiptReason, onValueChange: setNoReceiptReason, options: adapter.noReceipt.reasons })) : (_jsx(Textarea, { value: noReceiptReason, onChange: (event) => setNoReceiptReason(event.target.value), placeholder: labels.noReceiptReasonPlaceholder, rows: 2 })), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => setNoReceiptOpen(false), children: labels.close }), _jsx(Button, { onClick: confirmNoReceipt, disabled: !noReceiptReason.trim(), children: labels.noReceiptConfirm })] })] }) })] }));
+}

package/dist/pages/bank-transactions/BankTransactionsPage.d.ts

@@ -0,0 +1,7 @@
+import type { BankReconciliationAdapter } from "../../adapters/bank-reconciliation";
+import { type BankTransactionsLabels } from "./labels";
+export interface BankTransactionsPageProps {
+    adapter: BankReconciliationAdapter;
+    labels?: BankTransactionsLabels;
+}
+export declare function BankTransactionsPage({ adapter, labels }: BankTransactionsPageProps): import("react").JSX.Element;

package/dist/pages/bank-transactions/BankTransactionsPage.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 { 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 { MatchStatusBadge, DirectionBadge } from "./badges.js";
+import { BankMatchPanel } from "./BankMatchPanel.js";
+import { SortControl } from "./sort-control.js";
+import { useTableView } from "./use-table-view.js";
+import { englishBankTransactionsLabels } from "./labels.js";
+export function BankTransactionsPage({ adapter, labels = englishBankTransactionsLabels }) {
+    const transactionsQuery = adapter.useTransactions();
+    const accountsQuery = adapter.useAccounts();
+    const [search, setSearch] = useState("");
+    const [accountId, setAccountId] = useState("");
+    const [status, setStatus] = useState("");
+    const [openTransaction, setOpenTransaction] = useState(null);
+    const accountById = useMemo(() => new Map(accountsQuery.data.map((a) => [a.id, a])), [accountsQuery.data]);
+    const statusOptions = useMemo(() => {
+        const set = new Set(transactionsQuery.data.map((t) => t.matching_status).filter(Boolean));
+        return Array.from(set);
+    }, [transactionsQuery.data]);
+    const filteredRows = useMemo(() => {
+        const term = search.trim().toLowerCase();
+        return transactionsQuery.data.filter((row) => {
+            if (accountId && row.account_id !== accountId)
+                return false;
+            if (status && row.matching_status !== status)
+                return false;
+            if (!term)
+                return true;
+            return `${row.counterparty_holder ?? ""} ${row.payment_reference ?? ""} ${row.booking_text ?? ""}`.toLowerCase().includes(term);
+        });
+    }, [transactionsQuery.data, search, accountId, status]);
+    const view = useTableView(filteredRows, {
+        initialSort: "bookingDate",
+        initialDirection: "desc",
+        resetKey: `${search}|${accountId}|${status}`,
+        sortValue: (row, key) => {
+            switch (key) {
+                case "amount":
+                    return row.amount;
+                case "counterparty":
+                    return row.counterparty_holder ?? "";
+                default:
+                    return row.booking_date ?? "";
+            }
+        },
+    });
+    const sortColumns = [
+        { value: "bookingDate", label: labels.columnDate },
+        { value: "amount", label: labels.columnAmount },
+        { value: "counterparty", label: labels.columnCounterparty },
+    ];
+    return (_jsxs("div", { children: [_jsxs("div", { children: [_jsx("h1", { className: "mt-2 text-2xl font-semibold tracking-tight text-foreground", children: labels.title }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: labels.subtitle })] }), _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" })] }), _jsx(Combobox, { value: accountId, onValueChange: setAccountId, className: "w-full sm:w-48", options: [{ value: "", label: labels.accountAll }, ...accountsQuery.data.map((a) => ({ value: a.id, label: a.account_name ?? a.iban ?? a.id }))] }), _jsx(Combobox, { value: status, onValueChange: setStatus, className: "w-full sm:w-40", options: [{ value: "", label: labels.statusAll }, ...statusOptions.map((s) => ({ value: s, label: labels.matchingStatus(s) }))] }), _jsx(SortControl, { columns: sortColumns, sort: view.sort, direction: view.direction, onSort: view.setSort, onDirection: view.setDirection, labels: labels })] }), transactionsQuery.error ? (_jsx("div", { className: "mt-4", children: _jsx(ErrorState, { error: transactionsQuery.error, onRetry: () => { } }) })) : transactionsQuery.loading ? (_jsx("div", { className: "mt-4", children: _jsx(TableSkeleton, { rows: 8, columns: 7 }) })) : (_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-[1000px]", children: [_jsx(TableHeader, { children: _jsxs(TableRow, { className: "bg-muted/40", children: [_jsx(TableHead, { children: labels.columnDate }), _jsx(TableHead, { children: labels.columnCounterparty }), _jsx(TableHead, { children: labels.columnReference }), _jsx(TableHead, { children: labels.columnAccount }), _jsx(TableHead, { className: "text-right", children: labels.columnAmount }), _jsx(TableHead, { children: labels.columnDirection }), _jsx(TableHead, { children: labels.columnStatus })] }) }), _jsxs(TableBody, { children: [view.pageRows.map((row) => (_jsxs(TableRow, { className: "cursor-pointer", onClick: () => setOpenTransaction(row), children: [_jsx(TableCell, { className: "whitespace-nowrap text-sm text-muted-foreground", children: adapter.formatDate(row.booking_date) }), _jsx(TableCell, { className: "max-w-[220px] truncate font-medium text-foreground", children: row.counterparty_holder ?? "—" }), _jsx(TableCell, { className: "max-w-[260px] truncate text-sm text-muted-foreground", children: row.payment_reference ?? row.booking_text ?? "—" }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: accountById.get(row.account_id)?.account_name ?? "—" }), _jsx(TableCell, { className: "text-right font-medium tabular-nums", children: adapter.formatMoney(row.amount) }), _jsx(TableCell, { children: _jsx(DirectionBadge, { direction: row.direction }) }), _jsx(TableCell, { children: _jsx(MatchStatusBadge, { status: row.matching_status, label: labels.matchingStatus }) })] }, row.id))), view.total === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 7, className: "py-12 text-center text-muted-foreground", children: labels.empty }) }))] })] }) })), !transactionsQuery.error && !transactionsQuery.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 })), _jsx(BankMatchPanel, { transaction: openTransaction, onClose: () => setOpenTransaction(null), adapter: adapter, labels: labels })] }));
+}

package/dist/pages/bank-transactions/badges.d.ts

@@ -0,0 +1,8 @@
+export declare function MatchStatusBadge({ status, label }: {
+    status: string | null;
+    label: (status: string) => string;
+}): import("react").JSX.Element;
+export declare function DirectionBadge({ direction, className }: {
+    direction: string | null;
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/pages/bank-transactions/badges.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/class-names.js";
+const STATUS_TONE = {
+    matched: "bg-emerald-100 text-emerald-800",
+    bestaetigt: "bg-emerald-100 text-emerald-800",
+    suggested: "bg-amber-100 text-amber-800",
+    vorschlag: "bg-amber-100 text-amber-800",
+    multiple: "bg-amber-100 text-amber-800",
+    ignored: "bg-muted text-muted-foreground",
+    ignoriert: "bg-muted text-muted-foreground",
+    unmatched: "bg-red-100 text-red-800",
+    offen: "bg-red-100 text-red-800",
+};
+export function MatchStatusBadge({ status, label }) {
+    if (!status)
+        return _jsx("span", { className: "text-xs text-muted-foreground", children: "\u2014" });
+    return (_jsx("span", { className: cn("inline-flex items-center rounded-md px-1.5 py-0.5 text-xs font-medium", STATUS_TONE[status] ?? "bg-muted text-muted-foreground"), children: label(status) }));
+}
+export function DirectionBadge({ direction, className }) {
+    if (!direction)
+        return null;
+    const outgoing = direction === "ausgehend" || direction === "outgoing";
+    return (_jsx("span", { className: cn("inline-flex items-center rounded-md px-1.5 py-0.5 text-xs font-medium", outgoing ? "bg-rose-100 text-rose-800" : "bg-teal-100 text-teal-800", className), children: outgoing ? "−" : "+" }));
+}

package/dist/pages/bank-transactions/index.d.ts

@@ -0,0 +1,6 @@
+export { BankTransactionsPage } from "./BankTransactionsPage";
+export type { BankTransactionsPageProps } from "./BankTransactionsPage";
+export { BankMatchPanel } from "./BankMatchPanel";
+export { englishBankTransactionsLabels } from "./labels";
+export type { BankTransactionsLabels } from "./labels";
+export { MatchStatusBadge, DirectionBadge } from "./badges";

package/dist/pages/bank-transactions/index.js

@@ -0,0 +1,4 @@
+export { BankTransactionsPage } from "./BankTransactionsPage.js";
+export { BankMatchPanel } from "./BankMatchPanel.js";
+export { englishBankTransactionsLabels } from "./labels.js";
+export { MatchStatusBadge, DirectionBadge } from "./badges.js";

package/dist/pages/bank-transactions/labels.d.ts

@@ -0,0 +1,41 @@
+export interface BankTransactionsLabels {
+    title: string;
+    subtitle: string;
+    searchPlaceholder: string;
+    accountAll: string;
+    statusAll: string;
+    columnDate: string;
+    columnCounterparty: string;
+    columnReference: string;
+    columnAccount: string;
+    columnAmount: string;
+    columnType: string;
+    columnDirection: string;
+    columnStatus: string;
+    empty: string;
+    sortLabel: string;
+    sortAscending: string;
+    sortDescending: string;
+    matchingStatus: (status: string) => string;
+    panelTitle: string;
+    panelSubtitle: (account: string) => string;
+    candidatesTitle: string;
+    candidatesEmpty: string;
+    candidateConfirm: string;
+    candidateReject: string;
+    matchConfirmed: string;
+    matchRejected: string;
+    scoreLabel: (score: number) => string;
+    manualSearchToggle: string;
+    manualSearchPlaceholder: string;
+    manualSearchEmpty: string;
+    noReceiptButton: string;
+    noReceiptDialogTitle: string;
+    noReceiptReasonPlaceholder: string;
+    noReceiptConfirm: string;
+    noReceiptMarked: string;
+    noReceiptClear: string;
+    noReceiptCleared: string;
+    close: string;
+}
+export declare const englishBankTransactionsLabels: BankTransactionsLabels;

package/dist/pages/bank-transactions/labels.js

@@ -0,0 +1,40 @@
+export const englishBankTransactionsLabels = {
+    title: "Bank reconciliation",
+    subtitle: "Match incoming bank movements to invoices.",
+    searchPlaceholder: "Search counterparty or reference",
+    accountAll: "All accounts",
+    statusAll: "All statuses",
+    columnDate: "Date",
+    columnCounterparty: "Counterparty",
+    columnReference: "Reference",
+    columnAccount: "Account",
+    columnAmount: "Amount",
+    columnType: "Type",
+    columnDirection: "Direction",
+    columnStatus: "Status",
+    empty: "No transactions found.",
+    sortLabel: "Sort by",
+    sortAscending: "Ascending",
+    sortDescending: "Descending",
+    matchingStatus: (status) => status,
+    panelTitle: "Match this transaction",
+    panelSubtitle: (account) => `Account: ${account}`,
+    candidatesTitle: "Suggested matches",
+    candidatesEmpty: "No suggested matches.",
+    candidateConfirm: "Confirm match",
+    candidateReject: "Not a match",
+    matchConfirmed: "Match confirmed.",
+    matchRejected: "Match rejected.",
+    scoreLabel: (score) => `${score}% match`,
+    manualSearchToggle: "Search manually",
+    manualSearchPlaceholder: "Search invoices…",
+    manualSearchEmpty: "No invoices found.",
+    noReceiptButton: "No receipt expected",
+    noReceiptDialogTitle: "Mark as no receipt expected",
+    noReceiptReasonPlaceholder: "Reason",
+    noReceiptConfirm: "Confirm",
+    noReceiptMarked: "Marked as no receipt expected.",
+    noReceiptClear: "Undo",
+    noReceiptCleared: "Cleared.",
+    close: "Close",
+};

package/dist/pages/bank-transactions/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/bank-transactions/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/bank-transactions/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>;

package/dist/pages/bank-transactions/use-table-view.js

@@ -0,0 +1,54 @@
+import { useMemo, useState } from "react";
+export function useTableView(rows, options) {
+    const { sortValue, initialSort, initialDirection = "asc", initialPageSize = 25, resetKey, } = options;
+    const [sort, setSortState] = useState(initialSort);
+    const [direction, setDirectionState] = useState(initialDirection);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(initialPageSize);
+    const [seenResetKey, setSeenResetKey] = useState(resetKey);
+    if (resetKey !== seenResetKey) {
+        setSeenResetKey(resetKey);
+        setPage(1);
+    }
+    const sortedRows = useMemo(() => {
+        const copy = [...rows];
+        copy.sort((first, second) => {
+            const firstValue = sortValue(first, sort);
+            const secondValue = sortValue(second, sort);
+            const comparison = typeof firstValue === "number" && typeof secondValue === "number"
+                ? firstValue - secondValue
+                : String(firstValue).localeCompare(String(secondValue));
+            return direction === "asc" ? comparison : -comparison;
+        });
+        return copy;
+    }, [rows, sort, direction, sortValue]);
+    const total = sortedRows.length;
+    const totalPages = Math.max(1, Math.ceil(total / pageSize));
+    const safePage = Math.min(page, totalPages);
+    const from = total === 0 ? 0 : (safePage - 1) * pageSize + 1;
+    const to = Math.min(safePage * pageSize, total);
+    const pageRows = sortedRows.slice((safePage - 1) * pageSize, safePage * pageSize);
+    function setSort(key) {
+        setSortState(key);
+        setPage(1);
+    }
+    function setDirection(next) {
+        setDirectionState(next);
+        setPage(1);
+    }
+    return {
+        pageRows,
+        sort,
+        direction,
+        setSort,
+        setDirection,
+        page: safePage,
+        setPage,
+        pageSize,
+        setPageSize,
+        total,
+        totalPages,
+        from,
+        to,
+    };
+}

package/dist/pages/category-rules/CategoryRulesPage.d.ts

@@ -0,0 +1,7 @@
+import type { CategoryRulesAdapter } from "../../adapters/category-rules";
+import { type CategoryRulesLabels } from "./labels";
+export interface CategoryRulesPageProps {
+    adapter: CategoryRulesAdapter;
+    labels?: CategoryRulesLabels;
+}
+export declare function CategoryRulesPage({ adapter, labels }: CategoryRulesPageProps): import("react").JSX.Element;