@hub-kit/core 0.3.0

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

@@ -0,0 +1,259 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { ArchiveRestore, ChevronDown, ChevronUp, ChevronsUpDown, Lock, Search, Trash2, } from "lucide-react";
+import { toast } from "sonner";
+import { Badge } from "../../ui/badge.js";
+import { Button } from "../../ui/button.js";
+import { Checkbox } from "../../ui/checkbox.js";
+import { Input } from "../../ui/input.js";
+import { Textarea } from "../../ui/textarea.js";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "../../ui/dialog.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../ui/tooltip.js";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "../../ui/alert-dialog.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../../ui/select.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "../../ui/table.js";
+import { ErrorState, TableSkeleton, readableErrorMessage, } from "../../components/feedback/query-states.js";
+import { TablePagination } from "../../components/feedback/table-pagination.js";
+import { englishFormatters } from "../../lib/formatters.js";
+import { englishTrashPageLabels } from "./labels.js";
+const ALL = "__all";
+const DEFAULT_PAGE_SIZE = 25;
+const AGE_OPTIONS = [
+    { value: "any", minimumDays: 0 },
+    { value: "olderThanThirtyDays", minimumDays: 30 },
+    { value: "olderThanNinetyDays", minimumDays: 90 },
+    { value: "olderThanOneYear", minimumDays: 365 },
+];
+function ageInDays(deletedAt) {
+    return Math.floor((Date.now() - new Date(deletedAt).getTime()) / 86_400_000);
+}
+function recordKey(record) {
+    return `${record.tableName}-${record.id}`;
+}
+function ageOptionLabel(value, labels) {
+    if (value === "olderThanThirtyDays")
+        return labels.olderThanThirtyDays;
+    if (value === "olderThanNinetyDays")
+        return labels.olderThanNinetyDays;
+    if (value === "olderThanOneYear")
+        return labels.olderThanOneYear;
+    return labels.anyAge;
+}
+export function TrashPage({ adapter, labels = englishTrashPageLabels, formatters = englishFormatters, }) {
+    const [tableFilter, setTableFilter] = useState(ALL);
+    const [searchInput, setSearchInput] = useState("");
+    const [ageFilter, setAgeFilter] = useState("any");
+    const [sortKey, setSortKey] = useState("deletedAt");
+    const [sortAscending, setSortAscending] = useState(false);
+    const [pageIndex, setPageIndex] = useState(0);
+    const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
+    const [selectedKeys, setSelectedKeys] = useState(new Set());
+    const recordsQuery = adapter.useTrashedRecords(tableFilter === ALL ? undefined : tableFilter);
+    const allRecords = useMemo(() => recordsQuery.data ?? [], [recordsQuery.data]);
+    // The filter options come from the backend; fall back to the types actually present.
+    const tablesQuery = adapter.useTrashTableNames();
+    const eligibleTables = useMemo(() => {
+        const fromBackend = tablesQuery.data?.eligible ?? [];
+        if (fromBackend.length > 0)
+            return fromBackend;
+        return [...new Set(allRecords.map((record) => record.tableName))].sort();
+    }, [tablesQuery.data, allRecords]);
+    const purgeableTables = useMemo(() => new Set(tablesQuery.data?.purgeable ?? eligibleTables), [tablesQuery.data, eligibleTables]);
+    const filteredRecords = useMemo(() => {
+        const needle = searchInput.trim().toLowerCase();
+        const minimumDays = AGE_OPTIONS.find((option) => option.value === ageFilter)?.minimumDays ?? 0;
+        const matches = allRecords.filter((record) => {
+            if (minimumDays > 0 && ageInDays(record.deletedAt) < minimumDays)
+                return false;
+            if (!needle)
+                return true;
+            return [record.label, record.deleteReason, record.deletedBy, record.tableName]
+                .filter(Boolean)
+                .some((field) => String(field).toLowerCase().includes(needle));
+        });
+        const direction = sortAscending ? 1 : -1;
+        return [...matches].sort((a, b) => {
+            if (sortKey === "deletedAt") {
+                return (new Date(a.deletedAt).getTime() - new Date(b.deletedAt).getTime()) * direction;
+            }
+            const left = sortKey === "type" ? a.tableName : (a.label ?? "");
+            const right = sortKey === "type" ? b.tableName : (b.label ?? "");
+            return left.localeCompare(right) * direction;
+        });
+    }, [allRecords, searchInput, ageFilter, sortKey, sortAscending]);
+    const totalPages = Math.max(1, Math.ceil(filteredRecords.length / pageSize));
+    const currentPageIndex = Math.min(pageIndex, totalPages - 1);
+    const visibleRecords = filteredRecords.slice(currentPageIndex * pageSize, (currentPageIndex + 1) * pageSize);
+    const selectedRecords = filteredRecords.filter((record) => selectedKeys.has(recordKey(record)));
+    // The header checkbox is scoped to this page; selecting the whole result set is a separate, explicit click.
+    const visibleKeys = visibleRecords.map(recordKey);
+    const wholePageSelected = visibleRecords.length > 0 && visibleKeys.every((key) => selectedKeys.has(key));
+    const pagePartlySelected = !wholePageSelected && visibleKeys.some((key) => selectedKeys.has(key));
+    const allFilteredSelected = filteredRecords.length > 0 && selectedRecords.length === filteredRecords.length;
+    const moreThanOnePage = filteredRecords.length > visibleRecords.length;
+    function togglePageSelection() {
+        setSelectedKeys((previous) => {
+            const next = new Set(previous);
+            if (wholePageSelected)
+                visibleKeys.forEach((key) => next.delete(key));
+            else
+                visibleKeys.forEach((key) => next.add(key));
+            return next;
+        });
+    }
+    function selectAllFiltered() {
+        setSelectedKeys(new Set(filteredRecords.map(recordKey)));
+    }
+    function toggleOne(record) {
+        setSelectedKeys((previous) => {
+            const next = new Set(previous);
+            const key = recordKey(record);
+            if (next.has(key))
+                next.delete(key);
+            else
+                next.add(key);
+            return next;
+        });
+    }
+    function sortBy(key) {
+        if (key === sortKey)
+            setSortAscending((value) => !value);
+        else {
+            setSortKey(key);
+            setSortAscending(key !== "deletedAt");
+        }
+        setPageIndex(0);
+    }
+    return (_jsx(TooltipProvider, { delayDuration: 150, children: _jsxs("div", { children: [_jsx("div", { className: "flex flex-col items-start gap-4 sm:flex-row sm:items-end sm:justify-between", 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 })] }) }), _jsxs("div", { className: "mt-6 flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center", children: [_jsxs("div", { className: "relative w-full sm:max-w-xs", children: [_jsx(Search, { className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground", "aria-hidden": true }), _jsx(Input, { type: "search", className: "pl-9", "aria-label": labels.searchLabel, placeholder: labels.searchPlaceholder, value: searchInput, onChange: (event) => {
+                                        setSearchInput(event.target.value);
+                                        setPageIndex(0);
+                                    } })] }), _jsxs(Select, { value: tableFilter, onValueChange: (value) => {
+                                setTableFilter(value);
+                                setPageIndex(0);
+                                setSelectedKeys(new Set());
+                            }, children: [_jsx(SelectTrigger, { className: "w-full sm:w-[220px]", "aria-label": labels.columns.type, children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: ALL, children: labels.allTypes }), eligibleTables.map((tableName) => (_jsx(SelectItem, { value: tableName, children: labels.tableLabel(tableName) }, tableName)))] })] }), _jsxs(Select, { value: ageFilter, onValueChange: (value) => {
+                                setAgeFilter(value);
+                                setPageIndex(0);
+                            }, children: [_jsx(SelectTrigger, { className: "w-full sm:w-[190px]", "aria-label": labels.ageFilterLabel, children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: AGE_OPTIONS.map((option) => (_jsx(SelectItem, { value: option.value, children: ageOptionLabel(option.value, labels) }, option.value))) })] })] }), recordsQuery.isError ? (_jsx("div", { className: "mt-6", children: _jsx(ErrorState, { error: recordsQuery.error, onRetry: () => recordsQuery.refetch() }) })) : recordsQuery.isLoading ? (_jsx("div", { className: "mt-6", children: _jsx(TableSkeleton, { rows: 6, columns: 6 }) })) : (_jsxs(_Fragment, { children: [_jsx(BulkActionBar, { adapter: adapter, labels: labels, selectedRecords: selectedRecords, purgeableTables: purgeableTables, filteredTotal: filteredRecords.length, allFilteredSelected: allFilteredSelected, canSelectAllFiltered: wholePageSelected && moreThanOnePage && !allFilteredSelected, moreThanOnePage: moreThanOnePage, onSelectAllFiltered: selectAllFiltered, onDone: () => setSelectedKeys(new Set()) }), _jsx("div", { className: "mt-3 hidden overflow-hidden rounded-xl border border-border bg-card sm:block", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { className: "bg-muted/40", children: [_jsx(TableHead, { className: "w-[44px]", children: _jsx(Checkbox, { checked: wholePageSelected ? true : pagePartlySelected ? "indeterminate" : false, onCheckedChange: togglePageSelection, "aria-label": labels.selection.selectPage, disabled: visibleRecords.length === 0 }) }), _jsx(SortableHead, { label: labels.columns.type, labels: labels, active: sortKey === "type", ascending: sortAscending, onClick: () => sortBy("type") }), _jsx(SortableHead, { label: labels.columns.label, labels: labels, active: sortKey === "label", ascending: sortAscending, onClick: () => sortBy("label") }), _jsx(SortableHead, { label: labels.columns.deletedAt, labels: labels, active: sortKey === "deletedAt", ascending: sortAscending, onClick: () => sortBy("deletedAt") }), _jsx(TableHead, { children: labels.columns.deletedBy }), _jsx(TableHead, { children: labels.columns.reason }), _jsx(TableHead, { className: "w-[110px]" })] }) }), _jsxs(TableBody, { children: [visibleRecords.map((record) => (_jsx(TrashTableRow, { adapter: adapter, labels: labels, formatters: formatters, record: record, purgeable: purgeableTables.has(record.tableName), selected: selectedKeys.has(recordKey(record)), onToggle: () => toggleOne(record) }, recordKey(record)))), visibleRecords.length === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 7, className: "py-12 text-center text-muted-foreground", children: labels.empty }) }))] })] }) }), _jsxs("div", { className: "mt-3 space-y-3 sm:hidden", children: [visibleRecords.map((record) => (_jsx(TrashCard, { adapter: adapter, labels: labels, formatters: formatters, record: record, purgeable: purgeableTables.has(record.tableName), selected: selectedKeys.has(recordKey(record)), onToggle: () => toggleOne(record) }, recordKey(record)))), visibleRecords.length === 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 }))] }), filteredRecords.length > 0 && (_jsx(TablePagination, { page: currentPageIndex + 1, totalPages: totalPages, pageSize: pageSize, total: filteredRecords.length, from: currentPageIndex * pageSize + 1, to: Math.min((currentPageIndex + 1) * pageSize, filteredRecords.length), onPage: (page) => setPageIndex(page - 1), onPageSize: (size) => {
+                                setPageSize(size);
+                                setPageIndex(0);
+                            } }))] }))] }) }));
+}
+function SortableHead({ label, labels, active, ascending, onClick, }) {
+    const Icon = !active ? ChevronsUpDown : ascending ? ChevronUp : ChevronDown;
+    return (_jsx(TableHead, { "aria-sort": active ? (ascending ? "ascending" : "descending") : "none", children: _jsxs("button", { type: "button", onClick: onClick, className: "inline-flex items-center gap-1 hover:text-foreground", "aria-label": `${label}: ${active && ascending ? labels.sortDescending : labels.sortAscending}`, children: [label, _jsx(Icon, { className: "size-3.5 opacity-60", "aria-hidden": true })] }) }));
+}
+// Says how long the record has been sitting in the trash, next to the formatted date.
+function DeletionAge({ deletedAt, labels }) {
+    const days = ageInDays(deletedAt);
+    const text = days < 1
+        ? labels.deletedToday
+        : days < 30
+            ? labels.deletedDaysAgo(days)
+            : days < 365
+                ? labels.deletedMonthsAgo(Math.floor(days / 30))
+                : labels.deletedYearsAgo(Math.floor(days / 365));
+    return _jsx("span", { className: "text-xs text-muted-foreground", children: text });
+}
+// Short reasons wrap in place; long ones clamp to two lines with a dialog showing the full text.
+function ReasonCell({ reason, labels }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const text = (reason ?? "").trim();
+    if (!text)
+        return _jsx("span", { className: "text-muted-foreground", children: "\u2014" });
+    const isLong = text.length > 80;
+    return (_jsxs("div", { className: "max-w-xs", children: [_jsx("p", { className: `whitespace-pre-wrap break-words text-sm text-muted-foreground ${isLong ? "line-clamp-2" : ""}`, children: text }), isLong && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "link", size: "sm", className: "h-auto p-0 text-xs", onClick: () => setIsOpen(true), children: labels.fullReason.showMore }), _jsx(Dialog, { open: isOpen, onOpenChange: setIsOpen, children: _jsx(DialogContent, { children: _jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: labels.fullReason.title }), _jsx(DialogDescription, { className: "whitespace-pre-wrap break-words text-left text-foreground", children: text })] }) }) })] }))] }));
+}
+// A real button so the lock reason is reachable by keyboard and on touch screens.
+function PurgeLockedHint({ reason }) {
+    const [isOpen, setIsOpen] = useState(false);
+    return (_jsxs(Tooltip, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": reason, className: "text-muted-foreground", onClick: () => setIsOpen((value) => !value), children: _jsx(Lock, { className: "size-4" }) }) }), _jsx(TooltipContent, { className: "max-w-xs whitespace-pre-wrap text-left", children: reason })] }));
+}
+function RecordActions({ adapter, labels, record, purgeable, }) {
+    const [isSaving, setIsSaving] = useState(false);
+    const [restoreOpen, setRestoreOpen] = useState(false);
+    const [purgeOpen, setPurgeOpen] = useState(false);
+    const [restoreReason, setRestoreReason] = useState("");
+    async function restore() {
+        setIsSaving(true);
+        try {
+            await adapter.restoreRecord({
+                tableName: record.tableName,
+                id: record.id,
+                reason: restoreReason.trim() || null,
+            });
+            toast.success(labels.restore.succeeded(record.label));
+        }
+        catch (error) {
+            toast.error(labels.restore.failed(readableErrorMessage(error, "")));
+        }
+        finally {
+            setIsSaving(false);
+        }
+    }
+    async function purge() {
+        setIsSaving(true);
+        try {
+            await adapter.purgeRecord({ tableName: record.tableName, id: record.id });
+            toast.success(labels.purge.succeeded(record.label));
+        }
+        catch (error) {
+            toast.error(labels.purge.failed(readableErrorMessage(error, "")));
+        }
+        finally {
+            setIsSaving(false);
+        }
+    }
+    return (_jsxs("div", { className: "flex justify-end gap-1", children: [_jsx(Button, { variant: "ghost", size: "icon", className: "text-brand hover:bg-brand/10 hover:text-brand", "aria-label": labels.restore.action, disabled: isSaving, onClick: () => setRestoreOpen(true), children: _jsx(ArchiveRestore, { className: "size-4" }) }), _jsx(AlertDialog, { open: restoreOpen, onOpenChange: setRestoreOpen, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: labels.restore.title }), _jsx(AlertDialogDescription, { children: labels.restore.description(record.label) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm text-muted-foreground", htmlFor: `restore-reason-${record.id}`, children: labels.restore.reasonLabel }), _jsx(Textarea, { id: `restore-reason-${record.id}`, rows: 2, value: restoreReason, placeholder: labels.restore.reasonPlaceholder, onChange: (event) => setRestoreReason(event.target.value) })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: labels.restore.cancel }), _jsx(AlertDialogAction, { onClick: restore, children: labels.restore.confirm })] })] }) }), !purgeable ? (_jsx(PurgeLockedHint, { reason: labels.purge.lockedReason(record.tableName) })) : (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "icon", className: "text-destructive hover:bg-destructive/10 hover:text-destructive", "aria-label": labels.purge.action, disabled: isSaving, onClick: () => setPurgeOpen(true), children: _jsx(Trash2, { className: "size-4" }) }), _jsx(AlertDialog, { open: purgeOpen, onOpenChange: setPurgeOpen, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: labels.purge.title }), _jsx(AlertDialogDescription, { children: labels.purge.description(record.label) })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: labels.purge.cancel }), _jsx(AlertDialogAction, { onClick: purge, className: "bg-destructive text-destructive-foreground hover:bg-destructive/90", children: labels.purge.confirm })] })] }) })] }))] }));
+}
+// Restores or purges everything ticked in one pass; purge confirms once, naming the count.
+function BulkActionBar({ adapter, labels, selectedRecords, purgeableTables, filteredTotal, allFilteredSelected, canSelectAllFiltered, moreThanOnePage, onSelectAllFiltered, onDone, }) {
+    const [purgeOpen, setPurgeOpen] = useState(false);
+    const [isSaving, setIsSaving] = useState(false);
+    if (selectedRecords.length === 0)
+        return null;
+    const purgeableRecords = selectedRecords.filter((record) => purgeableTables.has(record.tableName));
+    const lockedCount = selectedRecords.length - purgeableRecords.length;
+    async function restoreAll() {
+        setIsSaving(true);
+        let succeeded = 0;
+        for (const record of selectedRecords) {
+            try {
+                await adapter.restoreRecord({ tableName: record.tableName, id: record.id, reason: null });
+                succeeded++;
+            }
+            catch (error) {
+                toast.error(labels.restore.failed(readableErrorMessage(error, "")));
+            }
+        }
+        setIsSaving(false);
+        if (succeeded > 0)
+            toast.success(labels.restore.manySucceeded(succeeded));
+        onDone();
+    }
+    async function purgeAll() {
+        setIsSaving(true);
+        let succeeded = 0;
+        for (const record of purgeableRecords) {
+            try {
+                await adapter.purgeRecord({ tableName: record.tableName, id: record.id });
+                succeeded++;
+            }
+            catch (error) {
+                toast.error(labels.purge.failed(readableErrorMessage(error, "")));
+            }
+        }
+        setIsSaving(false);
+        setPurgeOpen(false);
+        if (succeeded > 0)
+            toast.success(labels.purge.manySucceeded(succeeded));
+        onDone();
+    }
+    return (_jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-3 rounded-xl border border-border bg-muted/40 px-4 py-3", children: [_jsx("span", { className: "text-sm font-medium text-foreground", children: labels.selection.selectedCount(selectedRecords.length) }), _jsx(Button, { size: "sm", variant: "outline", disabled: isSaving, onClick: restoreAll, children: labels.selection.restoreSelected(selectedRecords.length) }), _jsx(Button, { size: "sm", variant: "outline", className: "text-destructive", disabled: isSaving || purgeableRecords.length === 0, onClick: () => setPurgeOpen(true), children: labels.selection.purgeSelected(purgeableRecords.length) }), _jsx(Button, { size: "sm", variant: "ghost", disabled: isSaving, onClick: onDone, children: labels.selection.clearSelection }), canSelectAllFiltered && (_jsx(Button, { size: "sm", variant: "link", className: "h-auto p-0", disabled: isSaving, onClick: onSelectAllFiltered, children: labels.selection.selectAllFiltered(filteredTotal) })), allFilteredSelected && moreThanOnePage && (_jsx("span", { className: "text-xs text-muted-foreground", children: labels.selection.allFilteredSelected(filteredTotal) })), lockedCount > 0 && (_jsx("span", { className: "text-xs text-muted-foreground", children: labels.selection.notPurgeableCount(lockedCount) })), _jsx(AlertDialog, { open: purgeOpen, onOpenChange: setPurgeOpen, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: labels.purge.manyTitle(purgeableRecords.length) }), _jsx(AlertDialogDescription, { children: labels.purge.manyDescription(purgeableRecords.length) })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: labels.purge.cancel }), _jsx(AlertDialogAction, { onClick: purgeAll, className: "bg-destructive text-destructive-foreground hover:bg-destructive/90", children: labels.purge.confirm })] })] }) })] }));
+}
+function TrashTableRow({ adapter, labels, formatters, record, purgeable, selected, onToggle, }) {
+    return (_jsxs(TableRow, { "data-state": selected ? "selected" : undefined, children: [_jsx(TableCell, { children: _jsx(Checkbox, { checked: selected, onCheckedChange: onToggle, "aria-label": labels.selection.selectRow(record.label) }) }), _jsx(TableCell, { children: _jsx(Badge, { variant: "secondary", children: labels.tableLabel(record.tableName) }) }), _jsx(TableCell, { className: "font-medium text-foreground", children: record.label }), _jsxs(TableCell, { className: "text-sm text-muted-foreground", children: [_jsx("div", { children: formatters.formatDateTime(record.deletedAt) }), _jsx(DeletionAge, { deletedAt: record.deletedAt, labels: labels })] }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: record.deletedBy ?? "—" }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: _jsx(ReasonCell, { reason: record.deleteReason, labels: labels }) }), _jsx(TableCell, { children: _jsx(RecordActions, { adapter: adapter, labels: labels, record: record, purgeable: purgeable }) })] }));
+}
+function TrashCard({ adapter, labels, formatters, record, purgeable, selected, onToggle, }) {
+    return (_jsxs("div", { className: "rounded-xl border border-border bg-card p-4", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 gap-3", children: [_jsx(Checkbox, { checked: selected, onCheckedChange: onToggle, "aria-label": labels.selection.selectRow(record.label), className: "mt-1" }), _jsxs("div", { className: "min-w-0", children: [_jsx(Badge, { variant: "secondary", children: labels.tableLabel(record.tableName) }), _jsx("div", { className: "mt-1 truncate font-medium text-foreground", children: record.label })] })] }), _jsx(RecordActions, { adapter: adapter, labels: labels, record: record, purgeable: purgeable })] }), _jsxs("div", { className: "mt-3 space-y-1 border-t border-border pt-2 text-xs text-muted-foreground", children: [_jsxs("div", { children: [labels.columns.deletedAt, ": ", formatters.formatDateTime(record.deletedAt), " \u00B7", " ", _jsx(DeletionAge, { deletedAt: record.deletedAt, labels: labels })] }), _jsxs("div", { children: [labels.columns.deletedBy, ": ", record.deletedBy ?? "—"] }), record.deleteReason && (_jsxs("div", { children: [_jsxs("span", { className: "mr-1", children: [labels.columns.reason, ":"] }), _jsx(ReasonCell, { reason: record.deleteReason, labels: labels })] }))] })] }));
+}

package/dist/pages/vat-rules/labels.d.ts

@@ -0,0 +1,110 @@
+export interface VatRulesLabels {
+    title: string;
+    subtitle: string;
+    companyLabel: string;
+    allCompanies: string;
+    rulesTab: string;
+    reserveTab: string;
+    rulesHint: string;
+    newRuleButton: string;
+    countBySupplier: (count: number) => string;
+    countByProperty: (count: number) => string;
+    countByCompany: (count: number) => string;
+    countGlobal: (count: number) => string;
+    empty: string;
+    emptyHint: string;
+    columns: {
+        value: string;
+        scope: string;
+        effect: string;
+        active: string;
+        actions: string;
+    };
+    vatRateValue: (rate: number) => string;
+    vatTreatmentName: (value: string) => string;
+    vatSpecialCaseName: (value: string) => string;
+    deductibleShare: (percent: number) => string;
+    scopeNames: {
+        supplier: string;
+        property: string;
+        company: string;
+        referencePattern: string;
+    };
+    effect: (wouldChange: number, matches: number) => string;
+    effectHint: string;
+    toggleActivated: string;
+    toggleDeactivated: string;
+    actionFailed: (error: string) => string;
+    apply: {
+        action: string;
+        title: string;
+        description: (wouldChange: number, matches: number) => string;
+        nothingToApply: string;
+        confirm: (count: number) => string;
+        cancel: string;
+        appliedNone: string;
+        applied: (changed: number, matches: number) => string;
+        appliedWithSkipped: (changed: number, matches: number, skipped: number) => string;
+    };
+    deleteRule: {
+        action: string;
+        title: string;
+        description: (value: string) => string;
+        reasonPlaceholder: string;
+        cancel: string;
+        confirm: string;
+        deleted: string;
+    };
+    newRule: {
+        title: string;
+        description: string;
+        vatRateField: string;
+        vatRatePlaceholder: string;
+        vatRateInvalid: string;
+        vatRateOutOfRange: string;
+        vatRateUnusual: string;
+        treatmentField: string;
+        treatmentNone: string;
+        treatmentHint: string;
+        deductibleField: string;
+        deductiblePlaceholder: string;
+        deductibleInvalid: string;
+        deductibleHint: string;
+        specialCaseField: string;
+        specialCaseNone: string;
+        hospitalityHint: string;
+        scopeHeading: string;
+        scopeHint: string;
+        anyScopeOption: string;
+        referencePatternField: string;
+        referencePatternPlaceholder: string;
+        referencePatternHint: string;
+        noteField: string;
+        previewHeading: string;
+        previewLoading: string;
+        previewError: string;
+        previewText: (wouldChange: number, matches: number) => string;
+        previewHint: string;
+        valueMissing: string;
+        scopeMissing: string;
+        alreadyExists: string;
+        cancel: string;
+        save: string;
+        created: string;
+        createFailed: (error: string) => string;
+    };
+    reserve: {
+        title: string;
+        hint: string;
+        totalInputVat: string;
+        deductible: string;
+        nondeductible: string;
+        outputVat: string;
+        reserveAmount: string;
+        refund: string;
+        unresolved: (count: number, amountText: string) => string;
+        unresolvedShort: (count: number, amountText: string) => string;
+        emptyAllCompanies: string;
+    };
+}
+export declare const englishVatRulesLabels: VatRulesLabels;

package/dist/pages/vat-rules/labels.js

@@ -0,0 +1,109 @@
+export const englishVatRulesLabels = {
+    title: "VAT rules & tax reserve",
+    subtitle: "Rules that set the VAT rate, tax treatment and deductibility of incoming invoices, and the reserve they suggest.",
+    companyLabel: "Company",
+    allCompanies: "All companies",
+    rulesTab: "Rules",
+    reserveTab: "Tax reserve",
+    rulesHint: "A rule sets the VAT rate and deductibility for every invoice that matches its scope. More specific rules win over broader ones.",
+    newRuleButton: "New VAT rule",
+    countBySupplier: (count) => `${count} per supplier`,
+    countByProperty: (count) => `${count} per property`,
+    countByCompany: (count) => `${count} per company`,
+    countGlobal: (count) => `${count} global`,
+    empty: "No VAT rules yet.",
+    emptyHint: "Create a rule to set VAT rate and deductibility automatically.",
+    columns: {
+        value: "Value",
+        scope: "Scope",
+        effect: "Effect",
+        active: "Active",
+        actions: "Actions",
+    },
+    vatRateValue: (rate) => `${rate} %`,
+    vatTreatmentName: (value) => value,
+    vatSpecialCaseName: (value) => value,
+    deductibleShare: (percent) => `${percent}% deductible`,
+    scopeNames: {
+        supplier: "Supplier",
+        property: "Property",
+        company: "Company",
+        referencePattern: "Reference",
+    },
+    effect: (wouldChange, matches) => `${wouldChange} of ${matches}`,
+    effectHint: "How many existing invoices this rule would still change if applied retroactively.",
+    toggleActivated: "Rule activated.",
+    toggleDeactivated: "Rule deactivated.",
+    actionFailed: (error) => `The action failed: ${error}`,
+    apply: {
+        action: "Apply",
+        title: "Apply this rule to existing invoices?",
+        description: (wouldChange, matches) => `This rule matches ${matches} existing invoices and would change ${wouldChange} of them.`,
+        nothingToApply: "This rule would not change any existing invoice.",
+        confirm: (count) => `Change ${count} invoices`,
+        cancel: "Cancel",
+        appliedNone: "No invoices needed a change.",
+        applied: (changed, matches) => `Changed ${changed} of ${matches} matching invoices.`,
+        appliedWithSkipped: (changed, matches, skipped) => `Changed ${changed} of ${matches} matching invoices; ${skipped} were skipped.`,
+    },
+    deleteRule: {
+        action: "Delete",
+        title: "Delete this rule?",
+        description: (value) => `The rule "${value}" stays visible in the audit trail but stops affecting new invoices.`,
+        reasonPlaceholder: "Reason for deleting",
+        cancel: "Cancel",
+        confirm: "Delete rule",
+        deleted: "Rule deleted.",
+    },
+    newRule: {
+        title: "New VAT rule",
+        description: "Sets VAT rate, tax treatment and deductibility for every invoice matching the scope below.",
+        vatRateField: "VAT rate (%)",
+        vatRatePlaceholder: "19",
+        vatRateInvalid: "Please enter a number.",
+        vatRateOutOfRange: "The VAT rate must be between 0 and 100.",
+        vatRateUnusual: "This is an unusual VAT rate — please double-check it.",
+        treatmentField: "Tax treatment",
+        treatmentNone: "Not set",
+        treatmentHint: "How the invoice is treated for tax purposes.",
+        deductibleField: "Deductible share (%)",
+        deductiblePlaceholder: "100",
+        deductibleInvalid: "The deductible share must be between 0 and 100.",
+        deductibleHint: "How much of the input VAT can be deducted. Leave empty for fully deductible.",
+        specialCaseField: "Special case",
+        specialCaseNone: "None",
+        hospitalityHint: "Hospitality costs are typically 70% deductible.",
+        scopeHeading: "Scope",
+        scopeHint: "At least one scope is required, so the rule cannot silently match everything.",
+        anyScopeOption: "Any",
+        referencePatternField: "Reference pattern",
+        referencePatternPlaceholder: "e.g. maintenance contract",
+        referencePatternHint: "Matches when the invoice reference contains this text.",
+        noteField: "Note",
+        previewHeading: "Retroactive effect",
+        previewLoading: "Calculating …",
+        previewError: "The preview is not available right now.",
+        previewText: (wouldChange, matches) => `This rule matches ${matches} existing invoices and would change ${wouldChange} of them.`,
+        previewHint: "The gap between the two numbers is invoices that are already correct or were decided by a person.",
+        valueMissing: "Please enter a valid VAT rate first.",
+        scopeMissing: "Please narrow the rule down to at least one scope.",
+        alreadyExists: "A rule with this exact scope already exists.",
+        cancel: "Cancel",
+        save: "Create rule",
+        created: "VAT rule created.",
+        createFailed: (error) => `Creating the rule failed: ${error}`,
+    },
+    reserve: {
+        title: "Recommended tax reserve",
+        hint: "A recommendation based on the current invoices — never a booking.",
+        totalInputVat: "Input VAT total",
+        deductible: "Of which deductible",
+        nondeductible: "Of which non-deductible",
+        outputVat: "Output VAT",
+        reserveAmount: "Recommended reserve",
+        refund: "Expected refund",
+        unresolved: (count, amountText) => `${count} invoices totalling ${amountText} have no resolved deductibility yet and are not included.`,
+        unresolvedShort: (count, amountText) => `${count} unresolved (${amountText})`,
+        emptyAllCompanies: "No data available yet.",
+    },
+};

package/dist/pages/vat-rules/new-rule-dialog.d.ts

@@ -0,0 +1,7 @@
+import type { VatRulesAdapter } from "../../adapters/vat-rules";
+import type { VatRulesLabels } from "./labels";
+export declare function NewVatRuleDialog({ adapter, labels, defaultCompanyId, }: {
+    adapter: VatRulesAdapter;
+    labels: VatRulesLabels;
+    defaultCompanyId?: string;
+}): import("react").JSX.Element;

package/dist/pages/vat-rules/new-rule-dialog.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useMemo, useState } from "react";
+import { Plus, Wand2 } 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 { Field } from "../../ui/field.js";
+import { Combobox } from "../../ui/combobox.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "../../ui/dialog.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../../ui/select.js";
+import { readableErrorMessage } from "../../components/feedback/query-states.js";
+const NONE = "__none";
+export function NewVatRuleDialog({ adapter, labels, defaultCompanyId, }) {
+    const scopeGroupId = useId();
+    const [open, setOpen] = useState(false);
+    const [isSaving, setIsSaving] = useState(false);
+    const [vatRateText, setVatRateText] = useState("");
+    const [treatment, setTreatment] = useState(NONE);
+    const [deductibleText, setDeductibleText] = useState("");
+    const [specialCase, setSpecialCase] = useState(NONE);
+    const [supplierId, setSupplierId] = useState(NONE);
+    const [propertyId, setPropertyId] = useState(NONE);
+    const [companyId, setCompanyId] = useState(defaultCompanyId ?? NONE);
+    const [referencePattern, setReferencePattern] = useState("");
+    const [note, setNote] = useState("");
+    const suppliersQuery = adapter.useSuppliers();
+    const propertiesQuery = adapter.useProperties();
+    const companiesQuery = adapter.useCompanies();
+    const parsedRate = vatRateText.trim() === "" ? null : Number(vatRateText.replace(",", "."));
+    const rateNotANumber = parsedRate != null && !Number.isFinite(parsedRate);
+    const rateOutOfRange = parsedRate != null && Number.isFinite(parsedRate) && (parsedRate < 0 || parsedRate > 100);
+    const rateInvalid = rateNotANumber || rateOutOfRange;
+    // Not an error: reduced and foreign rates exist, so an unusual value only asks for a second look.
+    const rateUnusual = parsedRate != null && !rateInvalid && ![0, 7, 19].includes(parsedRate);
+    const parsedDeductible = deductibleText.trim() === "" ? null : Number(deductibleText.replace(",", "."));
+    const deductibleInvalid = parsedDeductible != null &&
+        (!Number.isFinite(parsedDeductible) || parsedDeductible < 0 || parsedDeductible > 100);
+    // The rule as it would be stored — also what the impact preview is computed from.
+    const draft = useMemo(() => {
+        if (parsedRate == null || !Number.isFinite(parsedRate))
+            return null;
+        if (rateOutOfRange || deductibleInvalid)
+            return null;
+        return {
+            vatRate: parsedRate,
+            vatTreatment: treatment === NONE ? null : treatment,
+            vatDeductiblePercent: parsedDeductible,
+            vatSpecialCase: specialCase === NONE ? null : specialCase,
+            supplierId: supplierId === NONE ? null : supplierId,
+            propertyId: propertyId === NONE ? null : propertyId,
+            companyId: companyId === NONE ? null : companyId,
+            referencePattern: referencePattern.trim() === "" ? null : referencePattern.trim(),
+        };
+    }, [
+        parsedRate,
+        rateOutOfRange,
+        deductibleInvalid,
+        treatment,
+        parsedDeductible,
+        specialCase,
+        supplierId,
+        propertyId,
+        companyId,
+        referencePattern,
+    ]);
+    const previewQuery = adapter.useDraftImpact(draft);
+    const scopeEmpty = supplierId === NONE &&
+        propertyId === NONE &&
+        companyId === NONE &&
+        referencePattern.trim() === "";
+    function resetForm() {
+        setVatRateText("");
+        setTreatment(NONE);
+        setDeductibleText("");
+        setSpecialCase(NONE);
+        setSupplierId(NONE);
+        setPropertyId(NONE);
+        setCompanyId(defaultCompanyId ?? NONE);
+        setReferencePattern("");
+        setNote("");
+    }
+    async function saveRule() {
+        if (!draft) {
+            toast.error(labels.newRule.valueMissing);
+            return;
+        }
+        if (scopeEmpty) {
+            toast.error(labels.newRule.scopeMissing);
+            return;
+        }
+        setIsSaving(true);
+        try {
+            await adapter.createVatRule({ ...draft, note: note.trim() === "" ? null : note.trim() });
+            toast.success(labels.newRule.created);
+            resetForm();
+            setOpen(false);
+        }
+        catch (error) {
+            toast.error(adapter.isDuplicateRuleError(error)
+                ? labels.newRule.alreadyExists
+                : labels.newRule.createFailed(readableErrorMessage(error, "")));
+        }
+        finally {
+            setIsSaving(false);
+        }
+    }
+    return (_jsxs(Dialog, { open: open, onOpenChange: setOpen, children: [_jsx(DialogTrigger, { asChild: true, children: _jsxs(Button, { className: "gap-2", children: [_jsx(Plus, { className: "size-4" }), " ", labels.newRuleButton] }) }), _jsxs(DialogContent, { className: "sm:max-w-lg", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: labels.newRule.title }), _jsx(DialogDescription, { children: labels.newRule.description })] }), _jsxs("div", { className: "space-y-4", children: [_jsxs(Field, { className: "space-y-1.5", children: [_jsx(Label, { children: labels.newRule.vatRateField }), _jsx(Input, { value: vatRateText, onChange: (event) => setVatRateText(event.target.value), placeholder: labels.newRule.vatRatePlaceholder, inputMode: "decimal" }), rateNotANumber ? (_jsx("p", { className: "text-xs text-destructive", children: labels.newRule.vatRateInvalid })) : rateOutOfRange ? (_jsx("p", { className: "text-xs text-destructive", children: labels.newRule.vatRateOutOfRange })) : rateUnusual ? (_jsx("p", { className: "text-xs text-warning", children: labels.newRule.vatRateUnusual })) : null] }), _jsxs(Field, { className: "space-y-1.5", children: [_jsx(Label, { children: labels.newRule.treatmentField }), _jsxs(Select, { value: treatment, onValueChange: setTreatment, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: NONE, children: labels.newRule.treatmentNone }), adapter.vatTreatmentValues.map((value) => (_jsx(SelectItem, { value: value, children: labels.vatTreatmentName(value) }, value)))] })] }), _jsx("p", { className: "text-xs text-muted-foreground", children: labels.newRule.treatmentHint })] }), _jsxs(Field, { className: "space-y-1.5", children: [_jsx(Label, { children: labels.newRule.deductibleField }), _jsx(Input, { value: deductibleText, onChange: (event) => setDeductibleText(event.target.value), placeholder: labels.newRule.deductiblePlaceholder, inputMode: "decimal" }), deductibleInvalid ? (_jsx("p", { className: "text-xs text-destructive", children: labels.newRule.deductibleInvalid })) : (_jsx("p", { className: "text-xs text-muted-foreground", children: labels.newRule.deductibleHint }))] }), _jsxs(Field, { className: "space-y-1.5", children: [_jsx(Label, { children: labels.newRule.specialCaseField }), _jsxs(Select, { value: specialCase, onValueChange: (value) => {
+                                            setSpecialCase(value);
+                                            if (value === "hospitality" && deductibleText.trim() === "") {
+                                                setDeductibleText("70");
+                                            }
+                                        }, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: NONE, children: labels.newRule.specialCaseNone }), adapter.vatSpecialCaseValues.map((value) => (_jsx(SelectItem, { value: value, children: labels.vatSpecialCaseName(value) }, value)))] })] }), specialCase === "hospitality" ? (_jsx("p", { className: "text-xs text-muted-foreground", children: labels.newRule.hospitalityHint })) : null] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { id: scopeGroupId, className: "text-sm leading-none font-medium", children: labels.newRule.scopeHeading }), _jsx("p", { className: "text-xs text-muted-foreground", children: labels.newRule.scopeHint })] }), _jsxs("div", { role: "group", "aria-labelledby": scopeGroupId, className: "grid gap-3 sm:grid-cols-2", children: [_jsxs(Field, { className: "space-y-1", children: [_jsx(Label, { className: "text-xs font-normal text-muted-foreground", children: labels.scopeNames.supplier }), _jsx(Combobox, { value: supplierId, onValueChange: setSupplierId, options: [
+                                                    { value: NONE, label: labels.newRule.anyScopeOption },
+                                                    ...(suppliersQuery.data ?? []).map((supplier) => ({
+                                                        value: supplier.id,
+                                                        label: supplier.name,
+                                                    })),
+                                                ] })] }), _jsxs(Field, { className: "space-y-1", children: [_jsx(Label, { className: "text-xs font-normal text-muted-foreground", children: labels.scopeNames.property }), _jsx(Combobox, { value: propertyId, onValueChange: setPropertyId, options: [
+                                                    { value: NONE, label: labels.newRule.anyScopeOption },
+                                                    ...(propertiesQuery.data ?? []).map((property) => ({
+                                                        value: property.id,
+                                                        label: property.name ? `${property.code} · ${property.name}` : property.code,
+                                                        keywords: property.name ?? "",
+                                                    })),
+                                                ] })] }), _jsxs(Field, { className: "space-y-1", children: [_jsx(Label, { className: "text-xs font-normal text-muted-foreground", children: labels.scopeNames.company }), _jsx(Combobox, { value: companyId, onValueChange: setCompanyId, options: [
+                                                    { value: NONE, label: labels.newRule.anyScopeOption },
+                                                    ...(companiesQuery.data ?? []).map((company) => ({
+                                                        value: company.id,
+                                                        label: `${company.code} · ${company.name}`,
+                                                        keywords: company.name,
+                                                    })),
+                                                ] })] })] }), _jsxs(Field, { className: "space-y-1.5", children: [_jsx(Label, { children: labels.newRule.referencePatternField }), _jsx(Input, { value: referencePattern, onChange: (event) => setReferencePattern(event.target.value), placeholder: labels.newRule.referencePatternPlaceholder }), _jsx("p", { className: "text-xs text-muted-foreground", children: labels.newRule.referencePatternHint })] }), _jsxs(Field, { className: "space-y-1.5", children: [_jsx(Label, { children: labels.newRule.noteField }), _jsx(Input, { value: note, onChange: (event) => setNote(event.target.value) })] }), _jsxs("div", { className: "rounded-lg border border-border bg-muted/40 p-3 text-sm", children: [_jsxs("div", { className: "flex items-center gap-1.5 font-medium text-foreground", children: [_jsx(Wand2, { className: "size-4" }), " ", labels.newRule.previewHeading] }), scopeEmpty ? (_jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: labels.newRule.scopeMissing })) : !draft ? (_jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: labels.newRule.valueMissing })) : previewQuery.isLoading ? (_jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: labels.newRule.previewLoading })) : previewQuery.isError ? (_jsx("p", { className: "mt-1 text-xs text-destructive", children: labels.newRule.previewError })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "mt-1", children: labels.newRule.previewText(previewQuery.data?.wouldChange ?? 0, previewQuery.data?.matches ?? 0) }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: labels.newRule.previewHint })] }))] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => setOpen(false), children: labels.newRule.cancel }), _jsx(Button, { onClick: saveRule, disabled: isSaving || !draft || scopeEmpty, children: labels.newRule.save })] })] })] }));
+}