@hub-kit/core 0.3.0

package/dist/pages/category-rules/CategoryRulesPage.js

@@ -0,0 +1,160 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { ArrowDown, ArrowUp, Pencil, Plus, 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 { Combobox } from "../../ui/combobox.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs.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 { englishCategoryRulesLabels } from "./labels.js";
+const NONE = "__none";
+const BWA_BLOCKS = ["revenue", "cost_of_goods", "costs", "neutral", "taxes", "special_case"];
+export function CategoryRulesPage({ adapter, labels = englishCategoryRulesLabels }) {
+    const [tab, setTab] = useState("categories");
+    return (_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(Tabs, { value: tab, onValueChange: setTab, className: "mt-6", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "categories", children: labels.tabCategories }), _jsx(TabsTrigger, { value: "rules", children: labels.tabRules })] }), _jsx(TabsContent, { value: "categories", className: "mt-4", children: _jsx(CategoriesTab, { adapter: adapter, labels: labels }) }), _jsx(TabsContent, { value: "rules", className: "mt-4", children: _jsx(RulesTab, { adapter: adapter, labels: labels }) })] })] }));
+}
+function CategoriesTab({ adapter, labels }) {
+    const categoriesQuery = adapter.useCategories();
+    const [dialogState, setDialogState] = useState(null);
+    const sorted = useMemo(() => [...categoriesQuery.data].sort((a, b) => a.sortOrder - b.sortOrder), [categoriesQuery.data]);
+    const byId = useMemo(() => new Map(sorted.map((c) => [c.id, c])), [sorted]);
+    async function archive(category) {
+        try {
+            await adapter.archiveCategory(category.id);
+            toast.success(labels.archivedToast);
+        }
+        catch (error) {
+            toast.error(readableErrorMessage(error, ""));
+        }
+    }
+    async function move(category, direction) {
+        try {
+            await adapter.moveCategory(category.id, direction);
+        }
+        catch (error) {
+            toast.error(readableErrorMessage(error, ""));
+        }
+    }
+    return (_jsxs("div", { children: [_jsx("div", { className: "flex justify-end", children: _jsxs(Button, { size: "sm", className: "gap-2", onClick: () => setDialogState("new"), children: [_jsx(Plus, { className: "size-4" }), " ", labels.newCategoryButton] }) }), categoriesQuery.error ? (_jsx("div", { className: "mt-4", children: _jsx(ErrorState, { error: categoriesQuery.error, onRetry: () => { } }) })) : categoriesQuery.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.columnCode }), _jsx(TableHead, { children: labels.columnName }), _jsx(TableHead, { children: labels.columnBlock }), _jsx(TableHead, { children: labels.columnDirection }), _jsx(TableHead, { className: "w-[140px]" })] }) }), _jsxs(TableBody, { children: [sorted.map((category) => {
+                                    const parent = category.parentId ? byId.get(category.parentId) : null;
+                                    return (_jsxs(TableRow, { className: cn(!category.isActive && "opacity-60"), children: [_jsx(TableCell, { className: "font-mono text-sm text-muted-foreground", children: category.code }), _jsxs(TableCell, { className: "font-medium text-foreground", children: [parent && _jsxs("span", { className: "text-muted-foreground", children: [parent.name, " \u203A "] }), category.name, _jsxs("div", { className: "mt-0.5 flex flex-wrap gap-1", children: [category.isCatchall && _jsx(Badge, { tone: "muted", children: labels.catchallBadge }), category.isExcludedFromPnl && _jsx(Badge, { tone: "muted", children: labels.excludedBadge }), !category.isActive && _jsx(Badge, { tone: "muted", children: labels.inactiveBadge })] })] }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: labels.block[category.bwaBlock] }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: category.direction === "incoming" ? labels.directionIncoming : labels.directionOutgoing }), _jsx(TableCell, { children: _jsxs("div", { className: "flex justify-end gap-1", children: [_jsx("button", { type: "button", title: labels.moveUp, className: "flex size-7 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground", onClick: () => move(category, "up"), children: _jsx(ArrowUp, { className: "size-3.5" }) }), _jsx("button", { type: "button", title: labels.moveDown, className: "flex size-7 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground", onClick: () => move(category, "down"), children: _jsx(ArrowDown, { className: "size-3.5" }) }), _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: () => setDialogState(category), children: _jsx(Pencil, { className: "size-3.5" }) }), _jsx("button", { type: "button", title: labels.archiveButton, className: "flex size-7 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive", onClick: () => archive(category), children: _jsx(Trash2, { className: "size-3.5" }) })] }) })] }, category.id));
+                                }), sorted.length === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5, className: "py-12 text-center text-muted-foreground", children: labels.emptyCategories }) }))] })] }) })), dialogState && (_jsx(CategoryDialog, { category: dialogState === "new" ? null : dialogState, categories: sorted, adapter: adapter, labels: labels, onClose: () => setDialogState(null) }))] }));
+}
+function Badge({ tone, children }) {
+    void tone;
+    return _jsx("span", { className: "inline-flex items-center rounded-md bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground", children: children });
+}
+function CategoryDialog({ category, categories, adapter, labels, onClose, }) {
+    const [code, setCode] = useState(category?.code ?? "");
+    const [name, setName] = useState(category?.name ?? "");
+    const [parentId, setParentId] = useState(category?.parentId ?? NONE);
+    const [bwaBlock, setBwaBlock] = useState(category?.bwaBlock ?? "costs");
+    const [bwaLine, setBwaLine] = useState(category?.bwaLine ?? "");
+    const [direction, setDirection] = useState(category?.direction ?? "incoming");
+    const [note, setNote] = useState(category?.note ?? "");
+    const [isSaving, setIsSaving] = useState(false);
+    async function save() {
+        if (!code.trim() || !name.trim() || !bwaLine.trim())
+            return;
+        const input = {
+            code: code.trim(),
+            name: name.trim(),
+            parentId: parentId === NONE ? null : parentId,
+            bwaBlock,
+            bwaLine: bwaLine.trim(),
+            direction,
+            note: note.trim() || null,
+        };
+        setIsSaving(true);
+        try {
+            if (category)
+                await adapter.updateCategory(category.id, input);
+            else
+                await adapter.createCategory(input);
+            toast.success(labels.savedToast);
+            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: category ? labels.editCategoryTitle : labels.newCategoryTitle }) }), _jsxs("div", { className: "grid gap-3", children: [_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: labels.fieldCode }), _jsx(Input, { value: code, onChange: (event) => setCode(event.target.value) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: labels.fieldName }), _jsx(Input, { value: name, onChange: (event) => setName(event.target.value) })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: labels.fieldParent }), _jsx(Combobox, { value: parentId, onValueChange: setParentId, options: [{ value: NONE, label: labels.parentNone }, ...categories.filter((c) => c.id !== category?.id).map((c) => ({ value: c.id, label: c.name }))] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: labels.fieldBlock }), _jsx(Combobox, { value: bwaBlock, onValueChange: (v) => setBwaBlock(v), options: BWA_BLOCKS.map((b) => ({ value: b, label: labels.block[b] })) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: labels.fieldDirection }), _jsx(Combobox, { value: direction, onValueChange: (v) => setDirection(v), options: [
+                                                { value: "incoming", label: labels.directionIncoming },
+                                                { value: "outgoing", label: labels.directionOutgoing },
+                                            ] })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: labels.fieldLine }), _jsx(Input, { value: bwaLine, onChange: (event) => setBwaLine(event.target.value) })] }), _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), rows: 2 })] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: onClose, children: labels.cancel }), _jsx(Button, { onClick: save, disabled: isSaving || !code.trim() || !name.trim() || !bwaLine.trim(), children: isSaving ? labels.saving : labels.save })] })] }) }));
+}
+function RulesTab({ adapter, labels }) {
+    const rulesQuery = adapter.useRules();
+    const [newRuleOpen, setNewRuleOpen] = useState(false);
+    return (_jsxs("div", { children: [_jsx("div", { className: "flex flex-wrap items-end justify-end gap-4", children: _jsxs(Button, { size: "sm", className: "gap-2", onClick: () => setNewRuleOpen(true), children: [_jsx(Plus, { className: "size-4" }), " ", labels.newRuleButton] }) }), _jsx("p", { className: "mt-4 max-w-3xl rounded-lg border border-border bg-muted/40 p-3 text-xs text-muted-foreground", children: labels.rulesHint }), 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: 4 }) })) : rulesQuery.data.length === 0 ? (_jsxs("div", { className: "mt-6 rounded-xl border border-border bg-card px-4 py-12 text-center", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: labels.emptyRules }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: labels.emptyRulesHint })] })) : (_jsx("div", { className: "mt-6 overflow-hidden overflow-x-auto rounded-xl border border-border bg-card", children: _jsx(Table, { children: _jsx(TableBody, { children: rulesQuery.data.map((rule) => (_jsx(RuleRow, { rule: rule, adapter: adapter, labels: labels }, rule.id))) }) }) })), newRuleOpen && _jsx(RuleDialog, { adapter: adapter, labels: labels, onClose: () => setNewRuleOpen(false) })] }));
+}
+function RuleRow({ rule, adapter, labels }) {
+    const [deleteOpen, setDeleteOpen] = useState(false);
+    async function toggleActive(active) {
+        try {
+            await adapter.setRuleActive(rule.id, active);
+        }
+        catch (error) {
+            toast.error(readableErrorMessage(error, ""));
+        }
+    }
+    async function confirmDelete() {
+        try {
+            await adapter.deleteRule(rule.id);
+            toast.success(labels.deletedToast);
+            setDeleteOpen(false);
+        }
+        catch (error) {
+            toast.error(readableErrorMessage(error, ""));
+        }
+    }
+    return (_jsxs(TableRow, { className: cn(!rule.isActive && "opacity-60"), children: [_jsx(TableCell, { className: "font-medium text-foreground", children: rule.categoryLabel }), _jsx(TableCell, { children: _jsx("div", { className: "flex flex-wrap gap-1.5", children: rule.scopeChips.map((chip, i) => (_jsxs("span", { className: "inline-flex items-center rounded-md bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground", children: [chip.label, ": ", chip.value] }, i))) }) }), _jsx(TableCell, { className: "max-w-[200px] truncate text-sm text-muted-foreground", children: rule.note ?? "—" }), _jsx(TableCell, { children: _jsxs("div", { className: "flex items-center justify-end gap-3", children: [_jsx("button", { type: "button", onClick: () => toggleActive(!rule.isActive), className: "text-xs font-medium text-muted-foreground hover:text-foreground", children: rule.isActive ? labels.deactivateButton : labels.activateButton }), _jsxs(AlertDialog, { open: deleteOpen, onOpenChange: setDeleteOpen, 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: labels.deleteDialogDescription })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: labels.deleteCancel }), _jsx(AlertDialogAction, { onClick: confirmDelete, className: "bg-destructive text-destructive-foreground hover:bg-destructive/90", children: labels.deleteConfirm })] })] })] })] }) })] }));
+}
+function RuleDialog({ adapter, labels, onClose }) {
+    const categoryOptionsQuery = adapter.useCategoryOptions();
+    const supplierOptionsQuery = adapter.useSupplierOptions();
+    const propertyOptionsQuery = adapter.usePropertyOptions();
+    const companyOptionsQuery = adapter.useCompanyOptions();
+    const [categoryId, setCategoryId] = useState("");
+    const [supplierId, setSupplierId] = useState(NONE);
+    const [propertyId, setPropertyId] = useState(NONE);
+    const [companyId, setCompanyId] = useState(NONE);
+    const [referencePattern, setReferencePattern] = useState("");
+    const [note, setNote] = useState("");
+    const [isSaving, setIsSaving] = useState(false);
+    async function save() {
+        if (!categoryId)
+            return;
+        const input = {
+            categoryId,
+            supplierId: supplierId === NONE ? null : supplierId,
+            propertyId: propertyId === NONE ? null : propertyId,
+            companyId: companyId === NONE ? null : companyId,
+            referencePattern: referencePattern.trim() || null,
+            note: note.trim() || null,
+        };
+        setIsSaving(true);
+        try {
+            await adapter.createRule(input);
+            toast.success(labels.ruleCreated);
+            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: 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.fieldCategory }), _jsx(Combobox, { value: categoryId, onValueChange: setCategoryId, options: categoryOptionsQuery.data.map((c) => ({ value: c.id, label: c.label })) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: labels.fieldSupplier }), _jsx(Combobox, { value: supplierId, onValueChange: setSupplierId, options: [{ value: NONE, label: labels.supplierAny }, ...supplierOptionsQuery.data.map((s) => ({ value: s.id, label: s.name }))] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: labels.fieldProperty }), _jsx(Combobox, { value: propertyId, onValueChange: setPropertyId, options: [{ value: NONE, label: labels.propertyAny }, ...propertyOptionsQuery.data.map((p) => ({ value: p.id, label: p.name ? `${p.code} · ${p.name}` : p.code }))] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: labels.fieldCompany }), _jsx(Combobox, { value: companyId, onValueChange: setCompanyId, options: [{ value: NONE, label: labels.companyAny }, ...companyOptionsQuery.data.map((c) => ({ value: c.id, label: `${c.code} · ${c.name}` }))] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: labels.fieldReferencePattern }), _jsx(Input, { value: referencePattern, onChange: (event) => setReferencePattern(event.target.value), placeholder: labels.fieldReferencePatternPlaceholder })] }), _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), rows: 2 })] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: onClose, children: labels.cancel }), _jsx(Button, { onClick: save, disabled: isSaving || !categoryId, children: isSaving ? labels.saving : labels.save })] })] }) }));
+}

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

@@ -0,0 +1,4 @@
+export { CategoryRulesPage } from "./CategoryRulesPage";
+export type { CategoryRulesPageProps } from "./CategoryRulesPage";
+export { englishCategoryRulesLabels } from "./labels";
+export type { CategoryRulesLabels } from "./labels";

package/dist/pages/category-rules/index.js

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

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

@@ -0,0 +1,66 @@
+export interface CategoryRulesLabels {
+    title: string;
+    subtitle: string;
+    tabCategories: string;
+    tabRules: string;
+    newCategoryButton: string;
+    columnCode: string;
+    columnName: string;
+    columnBlock: string;
+    columnDirection: string;
+    catchallBadge: string;
+    excludedBadge: string;
+    inactiveBadge: string;
+    emptyCategories: string;
+    editButton: string;
+    archiveButton: string;
+    moveUp: string;
+    moveDown: string;
+    newCategoryTitle: string;
+    editCategoryTitle: string;
+    fieldCode: string;
+    fieldName: string;
+    fieldParent: string;
+    parentNone: string;
+    fieldBlock: string;
+    fieldLine: string;
+    fieldDirection: string;
+    directionIncoming: string;
+    directionOutgoing: string;
+    block: Record<string, string>;
+    fieldNote: string;
+    cancel: string;
+    save: string;
+    saving: string;
+    saveFailed: (error: string) => string;
+    savedToast: string;
+    archivedToast: string;
+    rulesHint: string;
+    newRuleButton: string;
+    newRuleTitle: string;
+    fieldCategory: string;
+    fieldSupplier: string;
+    supplierAny: string;
+    fieldProperty: string;
+    propertyAny: string;
+    fieldCompany: string;
+    companyAny: string;
+    fieldReferencePattern: string;
+    fieldReferencePatternPlaceholder: string;
+    emptyRules: string;
+    emptyRulesHint: string;
+    deleteButton: string;
+    deleteDialogTitle: string;
+    deleteDialogDescription: string;
+    deleteCancel: string;
+    deleteConfirm: string;
+    deletedToast: string;
+    scopeSupplier: string;
+    scopeProperty: string;
+    scopeCompany: string;
+    scopeReference: string;
+    ruleCreated: string;
+    activateButton: string;
+    deactivateButton: string;
+}
+export declare const englishCategoryRulesLabels: CategoryRulesLabels;

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

@@ -0,0 +1,72 @@
+export const englishCategoryRulesLabels = {
+    title: "Categories & rules",
+    subtitle: "The cost taxonomy the evaluation is built on, and the rules that assign invoices to it.",
+    tabCategories: "Categories",
+    tabRules: "Rules",
+    newCategoryButton: "New category",
+    columnCode: "Code",
+    columnName: "Name",
+    columnBlock: "Block",
+    columnDirection: "Direction",
+    catchallBadge: "Catch-all",
+    excludedBadge: "Excluded from P&L",
+    inactiveBadge: "Inactive",
+    emptyCategories: "No categories yet.",
+    editButton: "Edit",
+    archiveButton: "Archive",
+    moveUp: "Move up",
+    moveDown: "Move down",
+    newCategoryTitle: "New category",
+    editCategoryTitle: "Edit category",
+    fieldCode: "Code",
+    fieldName: "Name",
+    fieldParent: "Parent category",
+    parentNone: "Top-level",
+    fieldBlock: "P&L block",
+    fieldLine: "P&L line",
+    fieldDirection: "Direction",
+    directionIncoming: "Incoming",
+    directionOutgoing: "Outgoing",
+    block: {
+        revenue: "Revenue",
+        cost_of_goods: "Cost of goods",
+        costs: "Costs",
+        neutral: "Neutral",
+        taxes: "Taxes",
+        special_case: "Special case",
+    },
+    fieldNote: "Note",
+    cancel: "Cancel",
+    save: "Save",
+    saving: "Saving…",
+    saveFailed: (error) => `Could not save: ${error}`,
+    savedToast: "Category saved.",
+    archivedToast: "Category archived.",
+    rulesHint: "A rule assigns a category automatically to any invoice matching its scope. The most specific rule wins.",
+    newRuleButton: "New rule",
+    newRuleTitle: "New assignment rule",
+    fieldCategory: "Category",
+    fieldSupplier: "Supplier",
+    supplierAny: "Any supplier",
+    fieldProperty: "Property",
+    propertyAny: "Any property",
+    fieldCompany: "Company",
+    companyAny: "Any company",
+    fieldReferencePattern: "Reference contains",
+    fieldReferencePatternPlaceholder: "Optional text match",
+    emptyRules: "No rules yet.",
+    emptyRulesHint: "Rules created here apply automatically to new invoices.",
+    deleteButton: "Delete",
+    deleteDialogTitle: "Delete this rule?",
+    deleteDialogDescription: "Invoices it already assigned keep their category; only future matching stops.",
+    deleteCancel: "Cancel",
+    deleteConfirm: "Delete",
+    deletedToast: "Rule deleted.",
+    scopeSupplier: "Supplier",
+    scopeProperty: "Property",
+    scopeCompany: "Company",
+    scopeReference: "Reference",
+    ruleCreated: "Rule created.",
+    activateButton: "Activate",
+    deactivateButton: "Deactivate",
+};

package/dist/pages/companies/company-detail-page.d.ts

@@ -0,0 +1,10 @@
+import { type Formatters } from "../../lib/formatters";
+import type { CompaniesAdapter } from "../../adapters/companies";
+import { type CompaniesLabels } from "./labels";
+export interface CompanyDetailPageProps {
+    companyId: string;
+    adapter: CompaniesAdapter;
+    labels?: CompaniesLabels;
+    formatters?: Formatters;
+}
+export declare function CompanyDetailPage({ companyId, adapter, labels, formatters, }: CompanyDetailPageProps): import("react").JSX.Element;

package/dist/pages/companies/company-detail-page.js

@@ -0,0 +1,184 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Archive, ArrowLeft, Pencil, RotateCcw, TriangleAlert } from "lucide-react";
+import { toast } from "sonner";
+import { Badge } from "../../ui/badge.js";
+import { Button } from "../../ui/button.js";
+import { Input } from "../../ui/input.js";
+import { Label } from "../../ui/label.js";
+import { Skeleton } from "../../ui/skeleton.js";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "../../ui/alert-dialog.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "../../ui/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, readableErrorMessage } from "../../components/feedback/query-states.js";
+import { cn } from "../../lib/class-names.js";
+import { englishFormatters } from "../../lib/formatters.js";
+import { FieldErrorText, RequiredMark, validateCompanyForm } from "./company-form.js";
+import { KnownSpellingsCard } from "./known-spellings-card.js";
+import { useInfiniteRows } from "./use-infinite-rows.js";
+import { englishCompaniesLabels } from "./labels.js";
+const NO_AREA = "__none";
+const STATUS_TONE_STYLE = {
+    brand: "bg-brand-tint text-brand-dark",
+    success: "bg-success-soft text-success",
+    warning: "bg-warning-soft text-warning",
+    danger: "bg-danger-soft text-danger",
+    neutral: "bg-muted text-muted-foreground",
+};
+function editFormFrom(company) {
+    return {
+        code: company.code ?? "",
+        name: company.name ?? "",
+        area: company.area ?? NO_AREA,
+    };
+}
+export function CompanyDetailPage({ companyId, adapter, labels = englishCompaniesLabels, formatters = englishFormatters, }) {
+    const companyQuery = adapter.useCompany(companyId);
+    const invoicesQuery = adapter.useInvoicesForCompany(companyId, companyQuery.data?.code);
+    const propertiesQuery = adapter.useProperties();
+    const propertyLinksQuery = adapter.usePropertyCompanyLinks();
+    const allCompaniesQuery = adapter.useCompanies({ includeArchived: false });
+    const [archiveReason, setArchiveReason] = useState("");
+    const [isEditing, setIsEditing] = useState(false);
+    const [form, setForm] = useState(null);
+    const [errors, setErrors] = useState({});
+    const [isSaving, setIsSaving] = useState(false);
+    const [isArchiving, setIsArchiving] = useState(false);
+    const [isRestoring, setIsRestoring] = useState(false);
+    const company = companyQuery.data ?? null;
+    // The adapter already applies the matching rule; only the presentational sort happens here.
+    const invoices = useMemo(() => [...(invoicesQuery.data ?? [])].sort((first, second) => (second.documentDate ?? "").localeCompare(first.documentDate ?? "")), [invoicesQuery.data]);
+    const totalAmount = invoices.reduce((sum, invoice) => sum + (invoice.amountGross ?? 0), 0);
+    // Tracked separately so the empty state is only shown once it is actually known to be true.
+    const invoicesReady = invoicesQuery.data !== undefined;
+    // Properties belonging to this company; a property may belong to several companies at once.
+    const ownProperties = useMemo(() => {
+        const ownPropertyIds = new Set((propertyLinksQuery.data ?? [])
+            .filter((link) => link.companyId === companyId)
+            .map((link) => link.propertyId));
+        return (propertiesQuery.data ?? []).filter((property) => ownPropertyIds.has(property.id));
+    }, [propertiesQuery.data, propertyLinksQuery.data, companyId]);
+    const visibleInvoices = useInfiniteRows(invoices, 25);
+    // id -> code, so the mismatch hint can name the owning company instead of a bare id.
+    const companyCodeById = useMemo(() => new Map((allCompaniesQuery.data ?? []).map((entry) => [entry.id, entry.code])), [allCompaniesQuery.data]);
+    // Property codes booked against THIS company that belong to a different one.
+    // A property with no ownership row at all is deliberately not flagged: that is "owner not
+    // recorded yet", not a mismatch.
+    const foreignProperties = useMemo(() => {
+        const ownersByPropertyId = new Map();
+        for (const link of propertyLinksQuery.data ?? []) {
+            const owners = ownersByPropertyId.get(link.propertyId) ?? new Set();
+            owners.add(link.companyId);
+            ownersByPropertyId.set(link.propertyId, owners);
+        }
+        const ownersByPropertyCode = new Map();
+        for (const property of propertiesQuery.data ?? []) {
+            const owners = ownersByPropertyId.get(property.id);
+            if (!owners || owners.size === 0 || owners.has(companyId))
+                continue;
+            ownersByPropertyCode.set(property.code, [...owners]);
+        }
+        return ownersByPropertyCode;
+    }, [propertyLinksQuery.data, propertiesQuery.data, companyId]);
+    const foreignInvoices = useMemo(() => invoices.filter((invoice) => invoice.propertyCode && foreignProperties.has(invoice.propertyCode)), [invoices, foreignProperties]);
+    const foreignTotal = foreignInvoices.reduce((sum, invoice) => sum + (invoice.amountGross ?? 0), 0);
+    if (companyQuery.isLoading) {
+        return (_jsxs("div", { className: "space-y-6", children: [_jsx(Skeleton, { className: "h-8 w-64" }), _jsx(Skeleton, { className: "h-64 w-full rounded-xl" })] }));
+    }
+    if (companyQuery.isError) {
+        return _jsx(ErrorState, { error: companyQuery.error, onRetry: () => companyQuery.refetch() });
+    }
+    if (!company) {
+        return (_jsxs("div", { className: "mx-auto max-w-md py-20 text-center", children: [_jsx("h1", { className: "text-xl font-semibold tracking-tight text-foreground", children: labels.detail.notFoundTitle }), _jsx(Button, { className: "mt-6", onClick: () => adapter.openCompanyList(), children: labels.detail.goToList })] }));
+    }
+    const editForm = form ?? editFormFrom(company);
+    const setField = (field, value) => {
+        setForm((previous) => ({ ...(previous ?? editFormFrom(company)), [field]: value }));
+        // Clear a field's error as soon as it is touched, not only on the next submit.
+        setErrors((previous) => (previous[field] ? { ...previous, [field]: "" } : previous));
+    };
+    function startEditing() {
+        setForm(editFormFrom(company));
+        setErrors({});
+        setIsEditing(true);
+    }
+    function cancelEditing() {
+        setForm(null);
+        setIsEditing(false);
+    }
+    async function save() {
+        const current = company;
+        const changes = {};
+        if (editForm.code.trim() && editForm.code.trim() !== current.code) {
+            changes.code = editForm.code.trim();
+        }
+        if (editForm.name.trim() && editForm.name.trim() !== current.name) {
+            changes.name = editForm.name.trim();
+        }
+        const areaValue = editForm.area === NO_AREA ? null : editForm.area;
+        if (areaValue !== current.area)
+            changes.area = areaValue;
+        const validated = validateCompanyForm({ code: editForm.code, name: editForm.name }, labels.validation);
+        if (Object.keys(validated.errors).length > 0) {
+            setErrors(validated.errors);
+            return;
+        }
+        setErrors({});
+        if (Object.keys(changes).length === 0) {
+            toast.info(labels.detail.noChangesToast);
+            setIsEditing(false);
+            return;
+        }
+        setIsSaving(true);
+        try {
+            await adapter.updateCompany({ companyId, changes });
+            toast.success(labels.detail.savedToast);
+            setForm(null);
+            setIsEditing(false);
+        }
+        catch (error) {
+            toast.error(labels.detail.saveFailedToast(readableErrorMessage(error, "")));
+        }
+        finally {
+            setIsSaving(false);
+        }
+    }
+    async function archive() {
+        setIsArchiving(true);
+        try {
+            await adapter.archiveCompany({ companyId, reason: archiveReason.trim() });
+            toast.success(labels.detail.archivedToast);
+            setArchiveReason("");
+        }
+        catch (error) {
+            toast.error(labels.detail.archiveFailedToast(readableErrorMessage(error, "")));
+        }
+        finally {
+            setIsArchiving(false);
+        }
+    }
+    async function restore() {
+        setIsRestoring(true);
+        try {
+            await adapter.restoreCompany({ companyId });
+            toast.success(labels.detail.restoredToast);
+        }
+        catch (error) {
+            toast.error(labels.detail.restoreFailedToast(readableErrorMessage(error, "")));
+        }
+        finally {
+            setIsRestoring(false);
+        }
+    }
+    return (_jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => adapter.openCompanyList(), className: "inline-flex cursor-pointer items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground", children: [_jsx(ArrowLeft, { className: "size-4" }), " ", labels.detail.backToList] }), _jsxs("div", { className: "mt-2 flex flex-wrap items-end justify-between gap-4", children: [_jsxs("h1", { className: "text-2xl font-semibold tracking-tight text-foreground", children: [_jsx("span", { className: "font-mono", children: company.code }), " \u00B7 ", company.name] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Button, { onClick: startEditing, className: "gap-2", children: [_jsx(Pencil, { className: "size-4" }), " ", labels.detail.edit] }), company.archivedAt ? (_jsxs(Button, { variant: "outline", className: "gap-2", disabled: isRestoring, onClick: restore, children: [_jsx(RotateCcw, { className: "size-4" }), " ", labels.detail.restore] })) : (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", className: "gap-2 text-destructive hover:bg-destructive/10 hover:text-destructive", children: [_jsx(Archive, { className: "size-4" }), " ", labels.detail.archive] }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: labels.detail.archiveDialogTitle }), _jsxs(AlertDialogDescription, { children: [labels.detail.archiveDialogDescription, invoicesReady && invoices.length > 0
+                                                                ? " " + labels.detail.archiveDialogInvoiceNote(invoices.length)
+                                                                : ""] })] }), _jsx(Input, { value: archiveReason, onChange: (event) => setArchiveReason(event.target.value), placeholder: labels.detail.archiveReasonPlaceholder }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: labels.detail.archiveCancel }), _jsx(AlertDialogAction, { disabled: !archiveReason.trim() || isArchiving, onClick: archive, className: "bg-destructive text-destructive-foreground hover:bg-destructive/90", children: labels.detail.archiveConfirm })] })] })] }))] })] }), company.archivedAt && (_jsxs("div", { className: "mt-4 flex items-center gap-2 rounded-lg border border-border bg-muted/40 px-3 py-2.5 text-sm text-muted-foreground", children: [_jsx(Archive, { className: "size-4 shrink-0" }), labels.detail.archivedBanner(formatters.formatDate(company.archivedAt), company.archiveReason?.trim() || labels.detail.archivedWithoutReason)] })), _jsxs("div", { className: "mt-6 grid gap-6 lg:grid-cols-[1fr_1.1fr]", children: [_jsxs("div", { className: "space-y-6", children: [_jsxs("section", { className: "rounded-xl border border-border bg-card p-5", children: [_jsx("h2", { className: "mb-4 text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: labels.detail.masterDataSection }), _jsxs("dl", { className: "space-y-3", children: [_jsxs("div", { className: "border-b border-border/60 pb-3", children: [_jsx("dt", { className: "text-xs text-muted-foreground", children: labels.detail.codeField }), _jsx("dd", { className: "font-mono text-sm text-foreground", children: company.code })] }), _jsxs("div", { children: [_jsx("dt", { className: "text-xs text-muted-foreground", children: labels.detail.nameField }), _jsx("dd", { className: "text-sm text-foreground", children: company.name })] }), _jsxs("div", { children: [_jsx("dt", { className: "text-xs text-muted-foreground", children: labels.detail.areaField }), _jsx("dd", { className: "text-sm text-foreground", children: company.area ? labels.detail.areaLabel(company.area) : "—" })] })] }), ownProperties.length > 0 && (_jsxs("div", { className: "mt-6", children: [_jsx("h3", { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: labels.detail.propertiesHeading }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: ownProperties.map((property) => (_jsxs("button", { type: "button", onClick: () => adapter.openProperty(property.code), className: "inline-flex cursor-pointer items-center rounded-md border border-border bg-muted/40 px-2 py-0.5 text-xs text-foreground transition-colors hover:bg-muted", children: [_jsx("span", { className: "font-mono", children: property.code }), property.name ? (_jsxs("span", { className: "ml-1 text-muted-foreground", children: ["\u00B7 ", property.name] })) : null] }, property.id))) })] }))] }), _jsx(KnownSpellingsCard, { adapter: adapter, companyCode: company.code ?? "", labels: labels.aliases })] }), _jsx("div", { className: "space-y-6", children: _jsxs("section", { className: "rounded-xl border border-border bg-card p-5", children: [_jsx("h2", { className: "mb-4 text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: labels.detail.bookedSection }), _jsx("div", { className: "mb-4 rounded-lg bg-muted/40 px-3 py-2", children: invoicesReady ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-xs text-muted-foreground", children: labels.detail.invoiceTotalCaption(invoices.length) }), _jsx("div", { className: "text-lg font-semibold tabular-nums text-foreground", children: formatters.formatMoney(totalAmount) })] })) : (_jsxs(_Fragment, { children: [_jsx(Skeleton, { className: "h-4 w-28" }), _jsx(Skeleton, { className: "mt-1.5 h-6 w-32" })] })) }), invoicesReady && foreignInvoices.length > 0 && (_jsxs("div", { className: "mb-4 flex items-start gap-2 rounded-lg border border-warning/30 bg-warning-soft px-3 py-2 text-foreground", children: [_jsx(TriangleAlert, { className: "mt-0.5 size-4 shrink-0 text-warning" }), _jsx("p", { className: "text-xs", children: labels.detail.foreignPropertiesWarning(foreignInvoices.length, formatters.formatMoney(foreignTotal)) })] })), _jsx("div", { className: "overflow-hidden rounded-lg border border-border", children: _jsx("div", { className: "max-h-[26rem] overflow-y-auto", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { className: "bg-muted/40 [&>th]:sticky [&>th]:top-0 [&>th]:z-10 [&>th]:bg-muted", children: [_jsx(TableHead, { children: labels.detail.columnInvoice }), _jsx(TableHead, { children: labels.detail.columnProperty }), _jsx(TableHead, { children: labels.detail.columnDate }), _jsx(TableHead, { className: "text-right", children: labels.detail.columnAmount }), _jsx(TableHead, { children: labels.detail.columnStatus })] }) }), _jsxs(TableBody, { children: [visibleInvoices.visible.map((invoice) => (_jsxs(TableRow, { className: "cursor-pointer", onClick: () => adapter.openInvoice(invoice.id), children: [_jsx(TableCell, { className: "font-medium text-foreground", children: invoice.invoiceNumber ?? labels.detail.withoutInvoiceNumber }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: invoice.propertyCode ? (foreignProperties.has(invoice.propertyCode) ? (_jsxs("span", { className: "inline-flex items-center gap-1 font-medium text-warning", title: labels.detail.foreignPropertyHint(invoice.propertyCode, (foreignProperties.get(invoice.propertyCode) ?? [])
+                                                                            .map((ownerId) => companyCodeById.get(ownerId) ?? ownerId)
+                                                                            .join(", ")), children: [_jsx(TriangleAlert, { className: "size-3.5 shrink-0" }), invoice.propertyCode] })) : (invoice.propertyCode)) : ("—") }), _jsx(TableCell, { className: "text-sm text-muted-foreground tabular-nums", children: formatters.formatDate(invoice.documentDate) }), _jsx(TableCell, { className: "text-right font-medium tabular-nums", children: formatters.formatMoney(invoice.amountGross) }), _jsx(TableCell, { children: _jsx(InvoiceStatusBadge, { status: invoice.status, adapter: adapter, labels: labels }) })] }, invoice.id))), !invoicesReady &&
+                                                            [0, 1, 2].map((index) => (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5, className: "py-3", children: _jsx(Skeleton, { className: "h-4 w-full" }) }) }, `invoice-skeleton-${index}`))), invoicesReady && invoices.length === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5, className: "py-8 text-center text-muted-foreground", children: labels.detail.invoicesEmpty }) })), visibleInvoices.hasMore && (_jsx(TableRow, { ref: visibleInvoices.sentinelRef, children: _jsx(TableCell, { colSpan: 99, className: "py-3 text-center text-xs text-muted-foreground", children: labels.detail.loadMoreRemaining(visibleInvoices.total - visibleInvoices.visible.length) }) }))] })] }) }) })] }) })] }), _jsx(Dialog, { open: isEditing, onOpenChange: (open) => (open ? undefined : cancelEditing()), children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: labels.detail.editDialogTitle }), _jsx(DialogDescription, { children: labels.detail.editDialogDescription })] }), _jsxs("div", { className: "grid gap-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { className: "text-xs text-muted-foreground", children: [labels.detail.codeField, " ", _jsx(RequiredMark, { title: labels.requiredFieldTitle })] }), _jsx(Input, { value: editForm.code, onChange: (event) => setField("code", event.target.value), "aria-invalid": !!errors.code }), _jsx(FieldErrorText, { text: errors.code })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { className: "text-xs text-muted-foreground", children: [labels.detail.nameField, " ", _jsx(RequiredMark, { title: labels.requiredFieldTitle })] }), _jsx(Input, { value: editForm.name, onChange: (event) => setField("name", event.target.value), "aria-invalid": !!errors.name }), _jsx(FieldErrorText, { text: errors.name })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: labels.detail.areaField }), _jsxs(Select, { value: editForm.area, onValueChange: (value) => setField("area", value), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: NO_AREA, children: labels.detail.areaNone }), adapter.areaOptions.map((area) => (_jsx(SelectItem, { value: area, children: labels.detail.areaLabel(area) }, area)))] })] })] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: cancelEditing, children: labels.detail.cancel }), _jsx(Button, { onClick: save, disabled: isSaving, children: isSaving ? labels.detail.saving : labels.detail.save })] })] }) })] }));
+}
+function InvoiceStatusBadge({ status, adapter, labels, }) {
+    const tone = status ? adapter.invoiceStatusTone[status] : undefined;
+    return (_jsx(Badge, { variant: "outline", className: cn("border-transparent font-medium", STATUS_TONE_STYLE[tone ?? "neutral"]), children: status ? labels.detail.invoiceStatusLabel(status) : "—" }));
+}

package/dist/pages/companies/company-form.d.ts

@@ -0,0 +1,20 @@
+export declare function RequiredMark({ title }: {
+    title: string;
+}): import("react").JSX.Element;
+export declare function FieldErrorText({ text }: {
+    text?: string;
+}): import("react").JSX.Element | null;
+export interface CompanyFormValidation {
+    code: string;
+    name: string;
+    errors: Record<string, string>;
+}
+export declare function validateCompanyForm(input: {
+    code: string;
+    name: string;
+}, labels: {
+    codeRequired: string;
+    codeTooLong: string;
+    codeInvalidCharacters: string;
+    nameRequired: string;
+}): CompanyFormValidation;

package/dist/pages/companies/company-form.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function RequiredMark({ title }) {
+    return (_jsx("span", { className: "text-destructive", title: title, "aria-hidden": true, children: "*" }));
+}
+export function FieldErrorText({ text }) {
+    if (!text)
+        return null;
+    return _jsx("p", { className: "text-xs text-destructive", children: text });
+}
+export function validateCompanyForm(input, labels) {
+    const code = input.code.trim();
+    const name = input.name.trim();
+    const errors = {};
+    if (!code)
+        errors.code = labels.codeRequired;
+    else if (code.length > 16)
+        errors.code = labels.codeTooLong;
+    else if (!/^[A-Za-z0-9]+$/.test(code))
+        errors.code = labels.codeInvalidCharacters;
+    if (!name)
+        errors.name = labels.nameRequired;
+    return { code, name, errors };
+}

package/dist/pages/companies/company-list-page.d.ts

@@ -0,0 +1,9 @@
+import { type Formatters } from "../../lib/formatters";
+import type { CompaniesAdapter } from "../../adapters/companies";
+import { type CompaniesLabels } from "./labels";
+export interface CompanyListPageProps {
+    adapter: CompaniesAdapter;
+    labels?: CompaniesLabels;
+    formatters?: Formatters;
+}
+export declare function CompanyListPage({ adapter, labels, formatters, }: CompanyListPageProps): import("react").JSX.Element;