@hub-kit/core 0.3.0

package/dist/pages/notifications/notifications-page.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { BellRing, Loader2 } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "../../ui/button.js";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../ui/card.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../../ui/select.js";
+import { Skeleton } from "../../ui/skeleton.js";
+import { Switch } from "../../ui/switch.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs.js";
+import { AlertList } from "../../components/notifications/alerts.js";
+import { useNotificationAcks } from "../../components/notifications/use-notification-acks.js";
+import { ReminderDialog, englishReminderDialogLabels, } from "../../components/notifications/reminder-dialog.js";
+import { readableErrorMessage } from "../../components/feedback/query-states.js";
+import { englishNotificationsPageLabels } from "./labels.js";
+const DATE_RANGES = ["all", "today", "sevenDays", "thirtyDays"];
+const RANGE_DAYS = {
+    today: 0,
+    sevenDays: 7,
+    thirtyDays: 30,
+};
+function isWithinRange(isoDateTime, range) {
+    const itemTime = new Date(isoDateTime);
+    if (Number.isNaN(itemTime.getTime()))
+        return false;
+    const rangeStart = new Date();
+    rangeStart.setHours(0, 0, 0, 0);
+    rangeStart.setDate(rangeStart.getDate() - RANGE_DAYS[range]);
+    return itemTime.getTime() >= rangeStart.getTime();
+}
+export function NotificationsPage({ adapter, canOpenSettings = false, extraSettingsCards, labels = englishNotificationsPageLabels, reminderLabels = englishReminderDialogLabels, }) {
+    const [activeTab, setActiveTab] = useState("alerts");
+    const showTabs = canOpenSettings;
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-xl font-semibold tracking-tight text-foreground", children: labels.title }), _jsx("p", { className: "text-sm text-muted-foreground", children: labels.subtitle })] }), _jsxs(Tabs, { value: showTabs ? activeTab : "alerts", onValueChange: setActiveTab, children: [showTabs && (_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "alerts", children: labels.alertsTab }), _jsx(TabsTrigger, { value: "settings", children: labels.settingsTab })] })), _jsx(TabsContent, { value: "alerts", className: "mt-4", children: _jsx(AlertsTab, { adapter: adapter, labels: labels, reminderLabels: reminderLabels }) }), showTabs && (_jsx(TabsContent, { value: "settings", className: "mt-4", children: _jsxs("div", { className: "grid gap-4 lg:grid-cols-2 xl:grid-cols-3", children: [_jsx(BellSettingsCard, { adapter: adapter, labels: labels }), extraSettingsCards] }) }))] })] }));
+}
+function AlertsTab({ adapter, labels, reminderLabels, }) {
+    const { items, loading } = adapter.useItems();
+    const ackStore = adapter.useAckStore();
+    const { isAcknowledged } = useNotificationAcks(items, ackStore);
+    const [reminderOpen, setReminderOpen] = useState(false);
+    const [range, setRange] = useState("all");
+    const recipients = adapter.useReminderRecipients();
+    const rangeLabel = {
+        all: labels.anyTime,
+        today: labels.today,
+        sevenDays: labels.lastSevenDays,
+        thirtyDays: labels.lastThirtyDays,
+    };
+    const filteredItems = range === "all" ? items : items.filter((item) => !item.at || isWithinRange(item.at, range));
+    return (_jsxs("div", { className: "max-w-2xl", children: [_jsxs("div", { className: "mb-3 flex flex-wrap items-center justify-end gap-2", children: [_jsxs(Select, { value: range, onValueChange: (value) => setRange(value), children: [_jsx(SelectTrigger, { className: "h-8 w-44 text-sm", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: DATE_RANGES.map((value) => (_jsx(SelectItem, { value: value, children: rangeLabel[value] }, value))) })] }), recipients.length > 0 && (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => setReminderOpen(true), children: [_jsx(BellRing, { className: "size-3.5", "aria-hidden": true }), labels.remindButton] }))] }), loading ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Skeleton, { className: "h-12 w-full rounded-xl" }), _jsx(Skeleton, { className: "h-12 w-full rounded-xl" }), _jsx(Skeleton, { className: "h-12 w-full rounded-xl" })] })) : (_jsx(AlertList, { items: filteredItems, emptyText: labels.empty, isRead: isAcknowledged, readLabel: labels.readSectionTitle })), _jsx(ReminderDialog, { recipients: recipients, sendReminder: adapter.sendReminder, open: reminderOpen, onOpenChange: setReminderOpen, labels: reminderLabels })] }));
+}
+function BellSettingsCard({ adapter, labels, }) {
+    const { saved, isLoading, save } = adapter.useBellToggles();
+    const [draft, setDraft] = useState(null);
+    const [isSaving, setIsSaving] = useState(false);
+    useEffect(() => {
+        if (saved && draft === null)
+            setDraft(saved);
+    }, [saved, draft]);
+    const toggles = draft ?? saved ?? {};
+    const isDirty = !!saved && !!draft && JSON.stringify(draft) !== JSON.stringify(saved);
+    async function saveDraft() {
+        if (!draft)
+            return;
+        setIsSaving(true);
+        try {
+            await save(draft);
+            toast.success(labels.saved);
+        }
+        catch (error) {
+            toast.error(labels.saveFailed, { description: readableErrorMessage(error, "") });
+        }
+        finally {
+            setIsSaving(false);
+        }
+    }
+    if (isLoading && !saved) {
+        return _jsx(Skeleton, { className: "h-96 w-full rounded-xl" });
+    }
+    return (_jsxs(Card, { className: "flex h-full min-w-0 flex-col", children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: [_jsx(BellRing, { className: "size-4 text-brand-dark", "aria-hidden": true }), labels.bellCardTitle] }), _jsx(CardDescription, { children: labels.bellCardDescription })] }), _jsxs(CardContent, { className: "flex flex-1 flex-col", children: [_jsx("div", { className: "divide-y divide-border", children: adapter.bellEventGroups.map((group) => (_jsxs("div", { className: "py-2 first:pt-0", children: [_jsx("p", { className: "pb-1 text-xs font-medium tracking-wide text-muted-foreground uppercase", children: labels.groupLabel(group.key) }), group.events.map((eventKey) => (_jsxs("label", { className: "flex cursor-pointer items-center justify-between gap-3 py-1.5", children: [_jsx("span", { className: "text-sm text-foreground", children: labels.eventLabel(eventKey) }), _jsx(Switch, { checked: toggles[eventKey] !== false, onCheckedChange: (checked) => setDraft({ ...toggles, [eventKey]: checked }) })] }, eventKey)))] }, group.key))) }), _jsxs("div", { className: "mt-auto flex justify-end gap-2 pt-4", children: [_jsx(Button, { size: "sm", variant: "outline", disabled: !isDirty || isSaving, onClick: () => saved && setDraft(saved), children: labels.cancel }), _jsxs(Button, { size: "sm", disabled: !isDirty || isSaving, onClick: saveDraft, children: [isSaving && _jsx(Loader2, { className: "size-3.5 animate-spin", "aria-hidden": true }), labels.save] })] })] })] }));
+}

package/dist/pages/open-items/OpenItemsPage.d.ts

@@ -0,0 +1,11 @@
+import type { OpenItemsAdapter } from "../../adapters/open-items";
+import type { BankReconciliationAdapter } from "../../adapters/bank-reconciliation";
+import { type BankTransactionsLabels } from "../bank-transactions/labels";
+import { type OpenItemsLabels } from "./labels";
+export interface OpenItemsPageProps {
+    openItemsAdapter: OpenItemsAdapter;
+    bankAdapter: BankReconciliationAdapter;
+    labels?: OpenItemsLabels;
+    bankLabels?: BankTransactionsLabels;
+}
+export declare function OpenItemsPage({ openItemsAdapter, bankAdapter, labels, bankLabels, }: OpenItemsPageProps): import("react").JSX.Element;

package/dist/pages/open-items/OpenItemsPage.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { CreditCard, Landmark, Search } from "lucide-react";
+import { Input } from "../../ui/input.js";
+import { Combobox } from "../../ui/combobox.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs.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 { BankMatchPanel } from "../bank-transactions/BankMatchPanel.js";
+import { englishBankTransactionsLabels } from "../bank-transactions/labels.js";
+import { computeUrgency } from "./urgency.js";
+import { englishOpenItemsLabels } from "./labels.js";
+const SOURCE_ICON = { banksapi: Landmark, pleo: CreditCard };
+export function OpenItemsPage({ openItemsAdapter, bankAdapter, labels = englishOpenItemsLabels, bankLabels = englishBankTransactionsLabels, }) {
+    const [tab, setTab] = useState("open");
+    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(Tabs, { value: tab, onValueChange: setTab, className: "mt-6", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "open", children: labels.tabOpenItems }), _jsx(TabsTrigger, { value: "missing", children: labels.tabMissingReceipts })] }), _jsx(TabsContent, { value: "open", className: "mt-4", children: _jsx(OpenItemsTab, { adapter: openItemsAdapter, labels: labels }) }), _jsx(TabsContent, { value: "missing", className: "mt-4", children: _jsx(MissingReceiptsTab, { adapter: bankAdapter, labels: labels, bankLabels: bankLabels }) })] })] }));
+}
+const PAGE_SIZE = 25;
+function OpenItemsTab({ adapter, labels }) {
+    const [type, setType] = useState("__all");
+    const [due, setDue] = useState("__all");
+    const [company, setCompany] = useState("");
+    const [search, setSearch] = useState("");
+    const [showBlocked, setShowBlocked] = useState(false);
+    const [page, setPage] = useState(1);
+    const itemsQuery = adapter.useOpenItems(showBlocked);
+    const companyOptionsQuery = adapter.useCompanyOptions();
+    const today = new Date().toISOString().slice(0, 10);
+    const filtered = useMemo(() => {
+        const term = search.trim().toLowerCase();
+        return itemsQuery.data.filter((row) => {
+            if (!showBlocked && row.blocked)
+                return false;
+            if (type !== "__all" && row.type !== type)
+                return false;
+            if (company && row.companyCode !== company)
+                return false;
+            if (term && !row.counterparty.toLowerCase().includes(term))
+                return false;
+            if (due !== "__all") {
+                const urgency = computeUrgency(row, today);
+                if (due === "overdue" && !urgency.overdue)
+                    return false;
+                if (due === "soon" && (urgency.overdue || urgency.days == null || urgency.days < -14))
+                    return false;
+            }
+            return true;
+        });
+    }, [itemsQuery.data, type, company, search, due, showBlocked, today]);
+    const sorted = useMemo(() => [...filtered].sort((a, b) => {
+        const ua = computeUrgency(a, today);
+        const ub = computeUrgency(b, today);
+        return (ub.days ?? -Infinity) - (ua.days ?? -Infinity);
+    }), [filtered, today]);
+    const { overdueCount, overdueAmount } = useMemo(() => {
+        let count = 0;
+        let amount = 0;
+        for (const row of filtered) {
+            const urgency = computeUrgency(row, today);
+            if (urgency.overdue) {
+                count += 1;
+                amount += (row.amount ?? 0) - row.matchedAmount;
+            }
+        }
+        return { overdueCount: count, overdueAmount: amount };
+    }, [filtered, today]);
+    const totalPages = Math.max(1, Math.ceil(sorted.length / PAGE_SIZE));
+    const safePage = Math.min(page, totalPages);
+    const pageRows = sorted.slice((safePage - 1) * PAGE_SIZE, safePage * PAGE_SIZE);
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex flex-wrap items-center 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); setPage(1); }, placeholder: labels.searchPlaceholder, className: "pl-9" })] }), _jsx(Combobox, { value: type, onValueChange: (v) => { setType(v); setPage(1); }, className: "w-full sm:w-40", options: [
+                            { value: "__all", label: labels.typeAll },
+                            { value: "incoming", label: labels.typeIncoming },
+                            { value: "outgoing", label: labels.typeOutgoing },
+                        ] }), _jsx(Combobox, { value: due, onValueChange: (v) => { setDue(v); setPage(1); }, className: "w-full sm:w-40", options: [
+                            { value: "__all", label: labels.dueAll },
+                            { value: "soon", label: labels.dueSoon },
+                            { value: "overdue", label: labels.dueOverdue },
+                        ] }), _jsx(Combobox, { value: company, onValueChange: (v) => { setCompany(v); setPage(1); }, className: "w-full sm:w-48", options: [{ value: "", label: labels.companyAll }, ...companyOptionsQuery.data.map((c) => ({ value: c.code, label: `${c.code} — ${c.name}` }))] }), _jsxs("label", { className: "flex cursor-pointer items-center gap-2 text-sm text-muted-foreground", children: [_jsx("input", { type: "checkbox", checked: showBlocked, onChange: (event) => { setShowBlocked(event.target.checked); setPage(1); }, className: "size-4" }), labels.showBlocked] })] }), _jsx("p", { className: "mt-3 text-xs text-muted-foreground", children: labels.summary(filtered.length, overdueCount, adapter.formatMoney(overdueAmount)) }), itemsQuery.error ? (_jsx("div", { className: "mt-4", children: _jsx(ErrorState, { error: itemsQuery.error, onRetry: () => { } }) })) : itemsQuery.loading ? (_jsx("div", { className: "mt-4", children: _jsx(TableSkeleton, { rows: 8, columns: 7 }) })) : (_jsx("div", { className: "mt-4 overflow-hidden overflow-x-auto rounded-xl border border-border bg-card", children: _jsxs(Table, { className: "min-w-[1000px]", children: [_jsx(TableHeader, { children: _jsxs(TableRow, { className: "bg-muted/40", children: [_jsx(TableHead, { children: labels.columnType }), _jsx(TableHead, { children: labels.columnCounterparty }), _jsx(TableHead, { children: labels.columnInvoice }), _jsx(TableHead, { className: "text-right", children: labels.columnAmount }), _jsx(TableHead, { className: "text-right", children: labels.columnMatched }), _jsx(TableHead, { children: labels.columnReceived }), _jsx(TableHead, { children: labels.columnDue }), _jsx(TableHead, { children: labels.columnDiscount })] }) }), _jsxs(TableBody, { children: [pageRows.map((row) => {
+                                    const urgency = computeUrgency(row, today);
+                                    return (_jsxs(TableRow, { className: "cursor-pointer", onClick: () => adapter.openInvoice({ type: row.type, id: row.id }), children: [_jsx(TableCell, { children: _jsx("span", { className: cn("inline-flex items-center rounded-md px-1.5 py-0.5 text-xs font-medium", row.type === "incoming" ? "bg-rose-100 text-rose-800" : "bg-teal-100 text-teal-800"), children: row.type === "incoming" ? labels.typeIncoming : labels.typeOutgoing }) }), _jsxs(TableCell, { className: "max-w-[220px] truncate font-medium text-foreground", children: [row.counterparty, row.blocked && _jsx("span", { className: "ml-1.5 inline-flex items-center rounded-md bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground", children: labels.blockedBadge })] }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: row.invoiceNumber ?? "—" }), _jsx(TableCell, { className: "text-right font-medium tabular-nums", children: adapter.formatMoney(row.amount) }), _jsx(TableCell, { className: "text-right text-sm tabular-nums text-muted-foreground", children: row.matchedAmount > 0 ? adapter.formatMoney(row.matchedAmount) : "—" }), _jsx(TableCell, { className: "whitespace-nowrap text-sm text-muted-foreground", children: adapter.formatDate(row.receivedAt) }), _jsx(TableCell, { className: "whitespace-nowrap text-sm", children: urgency.days != null ? (_jsx("span", { className: cn(urgency.level === "critical" ? "text-destructive" : urgency.level === "old" ? "text-amber-700" : "text-muted-foreground"), children: urgency.overdue ? labels.daysOverdue(urgency.days) : labels.daysOld(Math.abs(urgency.days)) })) : ("—") }), _jsx(TableCell, { className: "whitespace-nowrap text-sm text-muted-foreground", children: row.discountDeadline && row.discountPercent != null ? labels.discountUntil(adapter.formatDate(row.discountDeadline), row.discountPercent) : "—" })] }, `${row.type}-${row.id}`));
+                                }), sorted.length === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 8, className: "py-12 text-center text-muted-foreground", children: labels.emptyOpenItems }) }))] })] }) })), !itemsQuery.error && !itemsQuery.loading && sorted.length > 0 && (_jsx(TablePagination, { page: safePage, totalPages: totalPages, pageSize: PAGE_SIZE, total: sorted.length, from: (safePage - 1) * PAGE_SIZE + 1, to: Math.min(safePage * PAGE_SIZE, sorted.length), onPage: setPage, onPageSize: () => { } }))] }));
+}
+function MissingReceiptsTab({ adapter, labels, bankLabels, }) {
+    const [direction, setDirection] = useState("__all");
+    const [company, setCompany] = useState("");
+    const [search, setSearch] = useState("");
+    const [openTransaction, setOpenTransaction] = useState(null);
+    const transactionsQuery = adapter.useTransactions();
+    const companyOptionsQuery = adapter.useCompanyOptions?.();
+    const filtered = useMemo(() => {
+        const term = search.trim().toLowerCase();
+        return transactionsQuery.data.filter((row) => {
+            if (direction !== "__all" && row.direction !== direction)
+                return false;
+            if (!term)
+                return true;
+            return (row.counterparty_holder ?? "").toLowerCase().includes(term);
+        });
+    }, [transactionsQuery.data, direction, search]);
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex flex-wrap items-center 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: direction, onValueChange: setDirection, className: "w-full sm:w-40", options: [
+                            { value: "__all", label: labels.directionAll },
+                            { value: "eingehend", label: labels.directionIncoming },
+                            { value: "ausgehend", label: labels.directionOutgoing },
+                        ] }), companyOptionsQuery && (companyOptionsQuery.data?.length ?? 0) > 0 && (_jsx(Combobox, { value: company, onValueChange: setCompany, className: "w-full sm:w-48", options: [{ value: "", label: labels.companyAll }, ...companyOptionsQuery.data.map((c) => ({ value: c.code, label: `${c.code} — ${c.name}` }))] }))] }), 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: 5 }) })) : (_jsx("div", { className: "mt-4 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.columnDate }), _jsx(TableHead, { children: labels.columnCounterparty }), _jsx(TableHead, { children: labels.columnAccount }), _jsx(TableHead, { className: "text-right", children: labels.columnAmount }), _jsx(TableHead, { children: labels.columnSource })] }) }), _jsxs(TableBody, { children: [filtered.map((row) => {
+                                    const SourceIcon = row.transaction_type ? SOURCE_ICON[row.transaction_type] : undefined;
+                                    return (_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: "text-sm text-muted-foreground", children: row.account_id.slice(0, 8) }), _jsx(TableCell, { className: "text-right font-medium tabular-nums", children: adapter.formatMoney(row.amount) }), _jsx(TableCell, { children: SourceIcon ? _jsx(SourceIcon, { className: "size-4 text-muted-foreground" }) : "—" })] }, row.id));
+                                }), filtered.length === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5, className: "py-12 text-center text-muted-foreground", children: labels.emptyMissing }) }))] })] }) })), _jsx(BankMatchPanel, { transaction: openTransaction, onClose: () => setOpenTransaction(null), adapter: adapter, labels: bankLabels })] }));
+}

package/dist/pages/open-items/index.d.ts

@@ -0,0 +1,6 @@
+export { OpenItemsPage } from "./OpenItemsPage";
+export type { OpenItemsPageProps } from "./OpenItemsPage";
+export { englishOpenItemsLabels } from "./labels";
+export type { OpenItemsLabels } from "./labels";
+export { computeUrgency } from "./urgency";
+export type { Urgency, UrgencyLevel } from "./urgency";

package/dist/pages/open-items/index.js

@@ -0,0 +1,3 @@
+export { OpenItemsPage } from "./OpenItemsPage.js";
+export { englishOpenItemsLabels } from "./labels.js";
+export { computeUrgency } from "./urgency.js";

package/dist/pages/open-items/labels.d.ts

@@ -0,0 +1,37 @@
+export interface OpenItemsLabels {
+    title: string;
+    subtitle: string;
+    tabOpenItems: string;
+    tabMissingReceipts: string;
+    searchPlaceholder: string;
+    companyAll: string;
+    typeAll: string;
+    typeIncoming: string;
+    typeOutgoing: string;
+    dueAll: string;
+    dueSoon: string;
+    dueOverdue: string;
+    showBlocked: string;
+    summary: (count: number, overdueCount: number, overdueAmount: string) => string;
+    columnType: string;
+    columnCounterparty: string;
+    columnInvoice: string;
+    columnAmount: string;
+    columnMatched: string;
+    columnReceived: string;
+    columnDue: string;
+    columnDiscount: string;
+    daysOverdue: (days: number) => string;
+    daysOld: (days: number) => string;
+    discountUntil: (date: string, percent: number) => string;
+    blockedBadge: string;
+    emptyOpenItems: string;
+    directionAll: string;
+    directionIncoming: string;
+    directionOutgoing: string;
+    columnDate: string;
+    columnAccount: string;
+    columnSource: string;
+    emptyMissing: string;
+}
+export declare const englishOpenItemsLabels: OpenItemsLabels;

package/dist/pages/open-items/labels.js

@@ -0,0 +1,36 @@
+export const englishOpenItemsLabels = {
+    title: "Bank reconciliation",
+    subtitle: "Invoices still waiting on a payment, and payments still waiting on an invoice.",
+    tabOpenItems: "Open items",
+    tabMissingReceipts: "Missing receipts",
+    searchPlaceholder: "Search counterparty",
+    companyAll: "All companies",
+    typeAll: "All",
+    typeIncoming: "Incoming",
+    typeOutgoing: "Outgoing",
+    dueAll: "Any due date",
+    dueSoon: "Due soon",
+    dueOverdue: "Overdue",
+    showBlocked: "Show items that can never be matched",
+    summary: (count, overdueCount, overdueAmount) => `${count} open, ${overdueCount} overdue totaling ${overdueAmount}.`,
+    columnType: "Type",
+    columnCounterparty: "Counterparty",
+    columnInvoice: "Invoice",
+    columnAmount: "Amount",
+    columnMatched: "Matched",
+    columnReceived: "Received",
+    columnDue: "Due / age",
+    columnDiscount: "Discount",
+    daysOverdue: (days) => `${days}d overdue`,
+    daysOld: (days) => `${days}d old`,
+    discountUntil: (date, percent) => `${percent}% until ${date}`,
+    blockedBadge: "Can't be matched",
+    emptyOpenItems: "Nothing open.",
+    directionAll: "All directions",
+    directionIncoming: "Incoming",
+    directionOutgoing: "Outgoing",
+    columnDate: "Date",
+    columnAccount: "Account",
+    columnSource: "Source",
+    emptyMissing: "No unmatched transactions.",
+};

package/dist/pages/open-items/urgency.d.ts

@@ -0,0 +1,8 @@
+import type { OpenItemRow } from "../../adapters/open-items";
+export type UrgencyLevel = "normal" | "old" | "critical";
+export interface Urgency {
+    days: number | null;
+    overdue: boolean;
+    level: UrgencyLevel;
+}
+export declare function computeUrgency(row: Pick<OpenItemRow, "dueDate" | "documentDate" | "receivedAt">, today: string): Urgency;

package/dist/pages/open-items/urgency.js

@@ -0,0 +1,27 @@
+const OLD_AFTER_DAYS = 30;
+const VERY_OLD_AFTER_DAYS = 90;
+function daysSince(iso, today) {
+    if (!iso)
+        return null;
+    const then = new Date(iso.slice(0, 10)).getTime();
+    const now = new Date(today).getTime();
+    if (Number.isNaN(then) || Number.isNaN(now))
+        return null;
+    return Math.round((now - then) / (24 * 60 * 60 * 1000));
+}
+function urgencyDate(row) {
+    return row.dueDate ?? row.documentDate ?? row.receivedAt;
+}
+export function computeUrgency(row, today) {
+    if (row.dueDate) {
+        const days = daysSince(row.dueDate, today);
+        const overdue = days != null && days > 0;
+        return { days, overdue, level: overdue ? "critical" : "normal" };
+    }
+    const days = daysSince(urgencyDate(row), today);
+    return {
+        days,
+        overdue: false,
+        level: days == null || days < OLD_AFTER_DAYS ? "normal" : days < VERY_OLD_AFTER_DAYS ? "old" : "critical",
+    };
+}

package/dist/pages/opos-whitelist/OposWhitelistPage.d.ts

@@ -0,0 +1,7 @@
+import type { OposWhitelistAdapter } from "../../adapters/opos-whitelist";
+import { type OposWhitelistLabels } from "./labels";
+export interface OposWhitelistPageProps {
+    adapter: OposWhitelistAdapter;
+    labels?: OposWhitelistLabels;
+}
+export declare function OposWhitelistPage({ adapter, labels }: OposWhitelistPageProps): import("react").JSX.Element;

package/dist/pages/opos-whitelist/OposWhitelistPage.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { ArrowUpDown, Pencil, Plus, RefreshCw, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "../../ui/button.js";
+import { Input } from "../../ui/input.js";
+import { Label } from "../../ui/label.js";
+import { Textarea } from "../../ui/textarea.js";
+import { Switch } from "../../ui/switch.js";
+import { Combobox } from "../../ui/combobox.js";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, } from "../../ui/dialog.js";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "../../ui/alert-dialog.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../ui/table.js";
+import { ErrorState, TableSkeleton, readableErrorMessage } from "../../components/feedback/query-states.js";
+import { cn } from "../../lib/class-names.js";
+import { OPOS_CATEGORIES, OPOS_SCOPES, OPOS_TERM_MIN_LENGTH, asciiSpelling, shadowingRule } from "../../lib/opos-whitelist/index.js";
+import { englishOposWhitelistLabels } from "./labels.js";
+const ALL = "__all";
+export function OposWhitelistPage({ adapter, labels = englishOposWhitelistLabels }) {
+    const rulesQuery = adapter.useRules();
+    const hitsQuery = adapter.useHitCounts();
+    const [search, setSearch] = useState("");
+    const [category, setCategory] = useState(ALL);
+    const [status, setStatus] = useState("all");
+    const [hitsFilter, setHitsFilter] = useState("all");
+    const [sort, setSort] = useState({ key: "category", direction: "asc" });
+    const [reapplying, setReapplying] = useState(false);
+    const [editingRule, setEditingRule] = useState(null);
+    const rules = rulesQuery.data;
+    const hits = hitsQuery.data;
+    const shadowedBy = useMemo(() => {
+        const map = new Map();
+        for (const rule of rules) {
+            const winner = shadowingRule(rule, rules);
+            if (winner)
+                map.set(rule.id, winner);
+        }
+        return map;
+    }, [rules]);
+    const filtered = useMemo(() => {
+        const term = search.trim().toLowerCase();
+        const visible = rules.filter((rule) => {
+            if (term && !`${rule.term} ${rule.note ?? ""}`.toLowerCase().includes(term))
+                return false;
+            if (category !== ALL && rule.category !== category)
+                return false;
+            if (status === "active" && !rule.is_active)
+                return false;
+            if (status === "inactive" && rule.is_active)
+                return false;
+            const count = hits.get(rule.id) ?? 0;
+            if (hitsFilter === "with" && count === 0)
+                return false;
+            if (hitsFilter === "without" && count > 0)
+                return false;
+            return true;
+        });
+        const direction = sort.direction === "asc" ? 1 : -1;
+        const rank = (rule) => OPOS_CATEGORIES.indexOf(rule.category);
+        return [...visible].sort((a, b) => {
+            let d = 0;
+            if (sort.key === "category")
+                d = rank(a) - rank(b);
+            else if (sort.key === "term")
+                d = a.term.localeCompare(b.term);
+            else if (sort.key === "hits")
+                d = (hits.get(a.id) ?? 0) - (hits.get(b.id) ?? 0);
+            else
+                d = a.created_at.localeCompare(b.created_at);
+            if (d !== 0)
+                return d * direction;
+            return a.term.localeCompare(b.term);
+        });
+    }, [rules, hits, search, category, status, hitsFilter, sort]);
+    const filtersActive = search.trim() !== "" || category !== ALL || status !== "all" || hitsFilter !== "all";
+    async function reapplyAll() {
+        setReapplying(true);
+        try {
+            const result = await adapter.reapplyAll();
+            toast.success(labels.reappliedToast(result.affected));
+        }
+        catch (error) {
+            toast.error(readableErrorMessage(error, ""));
+        }
+        finally {
+            setReapplying(false);
+        }
+    }
+    async function setActive(rule, active) {
+        try {
+            await adapter.setActive(rule.id, active);
+        }
+        catch (error) {
+            toast.error(readableErrorMessage(error, ""));
+        }
+    }
+    function toggleSort(key) {
+        setSort((prev) => (prev.key === key ? { key, direction: prev.direction === "asc" ? "desc" : "asc" } : { key, direction: "asc" }));
+    }
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex flex-wrap items-end justify-between gap-4", 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 max-w-2xl text-sm text-muted-foreground", children: labels.subtitle })] }), adapter.canWrite && (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", className: "gap-2", disabled: reapplying, onClick: reapplyAll, children: [_jsx(RefreshCw, { className: cn("size-4", reapplying && "animate-spin") }), reapplying ? labels.reapplying : labels.reapplyButton] }), _jsxs(Button, { size: "sm", className: "gap-2", onClick: () => setEditingRule("new"), children: [_jsx(Plus, { className: "size-4" }), " ", labels.newRuleButton] })] }))] }), _jsx("p", { className: "mt-4 max-w-2xl rounded-lg border border-border bg-muted/40 p-3 text-xs text-muted-foreground", children: labels.hint }), !adapter.canWrite && _jsx("p", { className: "mt-2 max-w-2xl text-xs text-muted-foreground", children: labels.readOnlyHint }), rulesQuery.error ? (_jsx("div", { className: "mt-6", children: _jsx(ErrorState, { error: rulesQuery.error, onRetry: () => { } }) })) : rulesQuery.loading ? (_jsx("div", { className: "mt-6", children: _jsx(TableSkeleton, { rows: 6, columns: 5 }) })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mt-6 flex flex-wrap items-center gap-2", children: [_jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), placeholder: labels.searchPlaceholder, className: "h-9 w-full sm:w-64" }), _jsx(Combobox, { value: category, onValueChange: setCategory, className: "h-9 w-full sm:w-52", options: [{ value: ALL, label: labels.categoryAll }, ...OPOS_CATEGORIES.map((c) => ({ value: c, label: labels.category[c] }))] }), _jsx(Combobox, { value: status, onValueChange: (v) => setStatus(v), className: "h-9 w-full sm:w-44", options: [
+                                    { value: "all", label: labels.statusAll },
+                                    { value: "active", label: labels.statusActive },
+                                    { value: "inactive", label: labels.statusInactive },
+                                ] }), _jsx(Combobox, { value: hitsFilter, onValueChange: (v) => setHitsFilter(v), className: "h-9 w-full sm:w-44", options: [
+                                    { value: "all", label: labels.hitsAll },
+                                    { value: "with", label: labels.hitsWith },
+                                    { value: "without", label: labels.hitsWithout },
+                                ] }), filtersActive && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
+                                    setSearch("");
+                                    setCategory(ALL);
+                                    setStatus("all");
+                                    setHitsFilter("all");
+                                }, children: labels.resetFilters })), _jsx("span", { className: "text-xs text-muted-foreground", children: labels.shownOfTotal(filtered.length, rules.length) })] }), _jsx("div", { className: "mt-4 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: _jsx(SortHeader, { active: sort.key === "category", direction: sort.direction, label: labels.columnCategory, onClick: () => toggleSort("category") }) }), _jsx(TableHead, { children: labels.columnScope }), _jsx(TableHead, { children: _jsx(SortHeader, { active: sort.key === "term", direction: sort.direction, label: labels.columnTerm, onClick: () => toggleSort("term") }) }), _jsx(TableHead, { children: _jsx(SortHeader, { active: sort.key === "hits", direction: sort.direction, label: labels.columnHits, onClick: () => toggleSort("hits") }) }), _jsx(TableHead, { children: labels.columnNote }), _jsx(TableHead, { children: _jsx(SortHeader, { active: sort.key === "created", direction: sort.direction, label: labels.columnCreated, onClick: () => toggleSort("created") }) }), _jsx(TableHead, { className: "w-[80px] text-center", children: labels.columnActive }), _jsx(TableHead, { className: "w-[104px]" })] }) }), _jsxs(TableBody, { children: [filtered.map((rule) => (_jsxs(TableRow, { className: cn(!rule.is_active && "opacity-60"), children: [_jsx(TableCell, { children: _jsx("span", { className: "inline-flex rounded-md bg-muted px-2 py-0.5 text-xs font-medium text-foreground", children: labels.category[rule.category] }) }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: labels.scope[rule.scope] }), _jsxs(TableCell, { className: "min-w-[160px] break-words font-medium text-foreground", children: [rule.term, shadowedBy.has(rule.id) && (_jsx("span", { className: "ml-1.5 inline-flex items-center rounded-md bg-amber-100 px-1.5 py-0.5 text-xs font-medium text-amber-800", children: labels.shadowedBy(shadowedBy.get(rule.id).term) }))] }), _jsx(TableCell, { className: "text-right tabular-nums text-muted-foreground", children: hits.get(rule.id) ?? 0 }), _jsx(TableCell, { className: "max-w-[260px] break-words text-sm text-muted-foreground", children: rule.note ?? "—" }), _jsxs(TableCell, { className: "whitespace-nowrap text-xs text-muted-foreground", children: [_jsx("div", { children: adapter.formatDate(rule.created_at) }), rule.created_by && _jsx("div", { className: "truncate", children: rule.created_by })] }), _jsx(TableCell, { className: "text-center", children: _jsx(Switch, { checked: rule.is_active, onCheckedChange: (v) => setActive(rule, v), disabled: !adapter.canWrite }) }), _jsx(TableCell, { children: adapter.canWrite && (_jsxs("div", { className: "flex justify-end gap-1", children: [_jsx("button", { type: "button", title: labels.editButton, className: "flex size-7 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground", onClick: () => setEditingRule(rule), children: _jsx(Pencil, { className: "size-3.5" }) }), _jsx(DeleteRuleButton, { rule: rule, hitCount: hits.get(rule.id) ?? 0, adapter: adapter, labels: labels })] })) })] }, rule.id))), filtered.length === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 8, className: "py-12 text-center text-muted-foreground", children: rules.length === 0 ? labels.empty : labels.noMatches }) }))] })] }) })] })), editingRule && (_jsx(RuleDialog, { rule: editingRule === "new" ? null : editingRule, adapter: adapter, labels: labels, onClose: () => setEditingRule(null) }))] }));
+}
+function SortHeader({ active, direction, label, onClick }) {
+    return (_jsxs("button", { type: "button", className: cn("flex items-center gap-1 font-medium hover:text-foreground", active ? "text-foreground" : "text-muted-foreground"), "aria-sort": active ? (direction === "asc" ? "ascending" : "descending") : "none", onClick: onClick, children: [label, _jsx(ArrowUpDown, { className: cn("size-3", active ? "opacity-100" : "opacity-40") })] }));
+}
+function DeleteRuleButton({ rule, hitCount, adapter, labels }) {
+    const [open, setOpen] = useState(false);
+    async function confirm() {
+        try {
+            await adapter.deleteRule(rule.id);
+            toast.success(labels.deletedToast);
+            setOpen(false);
+        }
+        catch (error) {
+            toast.error(readableErrorMessage(error, ""));
+        }
+    }
+    return (_jsxs(AlertDialog, { open: open, onOpenChange: setOpen, children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx("button", { type: "button", title: labels.deleteButton, className: "flex size-7 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive", children: _jsx(Trash2, { className: "size-3.5" }) }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: labels.deleteDialogTitle }), _jsx(AlertDialogDescription, { children: hitCount > 0 ? labels.deleteDialogDescriptionWithHits(hitCount) : labels.deleteDialogDescription })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: labels.cancel }), _jsx(AlertDialogAction, { onClick: confirm, className: "bg-destructive text-destructive-foreground hover:bg-destructive/90", children: labels.deleteConfirm })] })] })] }));
+}
+function RuleDialog({ rule, adapter, labels, onClose }) {
+    const [term, setTerm] = useState(rule?.term ?? "");
+    const [scope, setScope] = useState(rule?.scope ?? OPOS_SCOPES[0]);
+    const [category, setCategory] = useState(rule?.category ?? OPOS_CATEGORIES[0]);
+    const [note, setNote] = useState(rule?.note ?? "");
+    const [isActive, setIsActive] = useState(rule?.is_active ?? true);
+    const [error, setError] = useState("");
+    const [isSaving, setIsSaving] = useState(false);
+    const suggestion = asciiSpelling(term);
+    async function save() {
+        if (term.trim().length < OPOS_TERM_MIN_LENGTH) {
+            setError(labels.fieldTermTooShort(OPOS_TERM_MIN_LENGTH));
+            return;
+        }
+        setError("");
+        setIsSaving(true);
+        const input = { term: term.trim(), scope, category, note: note.trim(), isActive };
+        try {
+            if (rule)
+                await adapter.updateRule(rule.id, input);
+            else
+                await adapter.createRule(input);
+            toast.success(labels.ruleSaved);
+            onClose();
+        }
+        catch (e) {
+            toast.error(labels.saveFailed(readableErrorMessage(e, "")));
+        }
+        finally {
+            setIsSaving(false);
+        }
+    }
+    return (_jsx(Dialog, { open: true, onOpenChange: (next) => !next && onClose(), children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: rule ? labels.editRuleTitle : labels.newRuleTitle }) }), _jsxs("div", { className: "grid gap-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: labels.fieldTerm }), _jsx(Input, { value: term, onChange: (event) => { setTerm(event.target.value); setError(""); }, "aria-invalid": !!error }), _jsx("p", { className: "text-xs text-muted-foreground", children: labels.fieldTermHint(OPOS_TERM_MIN_LENGTH) }), error && _jsx("p", { className: "text-xs text-destructive", children: error }), suggestion && _jsx("p", { className: "text-xs text-amber-700", children: labels.asciiSuggestion(suggestion) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: labels.fieldScope }), _jsx(Combobox, { value: scope, onValueChange: (v) => setScope(v), options: OPOS_SCOPES.map((s) => ({ value: s, label: labels.scope[s] })) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: labels.fieldCategory }), _jsx(Combobox, { value: category, onValueChange: (v) => setCategory(v), options: OPOS_CATEGORIES.map((c) => ({ value: c, label: labels.category[c] })) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: labels.fieldNote }), _jsx(Textarea, { value: note, onChange: (event) => setNote(event.target.value), placeholder: labels.fieldNotePlaceholder, rows: 2 })] }), _jsxs("label", { className: "flex items-center gap-2 text-sm text-foreground", children: [_jsx(Switch, { checked: isActive, onCheckedChange: setIsActive }), labels.fieldActive] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: onClose, children: labels.cancel }), _jsx(Button, { onClick: save, disabled: isSaving, children: isSaving ? labels.saving : labels.save })] })] }) }));
+}

package/dist/pages/opos-whitelist/index.d.ts

@@ -0,0 +1,4 @@
+export { OposWhitelistPage } from "./OposWhitelistPage";
+export type { OposWhitelistPageProps } from "./OposWhitelistPage";
+export { englishOposWhitelistLabels } from "./labels";
+export type { OposWhitelistLabels } from "./labels";

package/dist/pages/opos-whitelist/index.js

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

package/dist/pages/opos-whitelist/labels.d.ts

@@ -0,0 +1,56 @@
+export interface OposWhitelistLabels {
+    title: string;
+    subtitle: string;
+    hint: string;
+    readOnlyHint: string;
+    reapplyButton: string;
+    reapplying: string;
+    reappliedToast: (count: number) => string;
+    newRuleButton: string;
+    searchPlaceholder: string;
+    categoryAll: string;
+    category: Record<string, string>;
+    statusAll: string;
+    statusActive: string;
+    statusInactive: string;
+    hitsAll: string;
+    hitsWith: string;
+    hitsWithout: string;
+    resetFilters: string;
+    shownOfTotal: (shown: number, total: number) => string;
+    columnCategory: string;
+    columnScope: string;
+    columnTerm: string;
+    columnHits: string;
+    columnNote: string;
+    columnCreated: string;
+    columnActive: string;
+    scope: Record<string, string>;
+    shadowedBy: (term: string) => string;
+    empty: string;
+    noMatches: string;
+    editRuleTitle: string;
+    newRuleTitle: string;
+    fieldTerm: string;
+    fieldTermHint: (min: number) => string;
+    fieldTermTooShort: (min: number) => string;
+    fieldScope: string;
+    fieldCategory: string;
+    fieldNote: string;
+    fieldNotePlaceholder: string;
+    fieldActive: string;
+    asciiSuggestion: (spelling: string) => string;
+    cancel: string;
+    save: string;
+    saving: string;
+    saveFailed: (error: string) => string;
+    ruleSaved: string;
+    editButton: string;
+    deleteButton: string;
+    deleteDialogTitle: string;
+    deleteDialogDescriptionWithHits: (count: number) => string;
+    deleteDialogDescription: string;
+    deleteConfirm: string;
+    deletedToast: string;
+}
+export declare const englishOposWhitelistLabels: OposWhitelistLabels;