@hub-kit/core 0.3.0

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

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Plus, Search } 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 { Skeleton } from "../../ui/skeleton.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "../../ui/dialog.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 { cn } from "../../lib/class-names.js";
+import { englishFormatters } from "../../lib/formatters.js";
+import { FieldErrorText, RequiredMark, validateCompanyForm } from "./company-form.js";
+import { SortControl } from "./sort-control.js";
+import { useTableView } from "./use-table-view.js";
+import { englishCompaniesLabels } from "./labels.js";
+const EMPTY_TOTALS = { totalAmount: 0, invoiceCount: 0 };
+export function CompanyListPage({ adapter, labels = englishCompaniesLabels, formatters = englishFormatters, }) {
+    const [search, setSearch] = useState("");
+    const [showArchived, setShowArchived] = useState(false);
+    const companiesQuery = adapter.useCompanies({ includeArchived: showArchived });
+    const totalsQuery = adapter.useCompanyInvoiceTotals();
+    const companies = useMemo(() => companiesQuery.data ?? [], [companiesQuery.data]);
+    // Totals load separately from the list, so a row can render before its numbers are known.
+    const totalsReady = totalsQuery.data !== undefined;
+    const totals = totalsQuery.data ?? new Map();
+    const filteredCompanies = useMemo(() => {
+        const term = search.trim().toLowerCase();
+        return companies.filter((company) => !term || `${company.code} ${company.name}`.toLowerCase().includes(term));
+    }, [companies, search]);
+    const view = useTableView(filteredCompanies, {
+        initialSort: "updatedAt",
+        initialDirection: "desc",
+        resetKey: `${search}|${showArchived}`,
+        sortValue: (company, key) => {
+            const companyTotals = totals.get(company.id) ?? EMPTY_TOTALS;
+            switch (key) {
+                case "name":
+                    return company.name ?? "";
+                case "bookedTotal":
+                    return companyTotals.totalAmount;
+                case "createdAt":
+                    return company.createdAt ?? "";
+                case "updatedAt":
+                    return company.updatedAt ?? company.createdAt ?? "";
+                default:
+                    return company.code ?? "";
+            }
+        },
+    });
+    const sortColumns = [
+        { value: "code", label: labels.list.columnCode },
+        { value: "name", label: labels.list.columnName },
+        { value: "bookedTotal", label: labels.list.columnBookedTotal },
+        { value: "createdAt", label: labels.list.columnCreatedAt },
+        { value: "updatedAt", label: labels.list.columnUpdatedAt },
+    ];
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex flex-wrap items-end justify-between gap-4", children: [_jsxs("div", { children: [_jsx("h1", { className: "mt-2 text-2xl font-semibold tracking-tight text-foreground", children: labels.list.title }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: labels.list.subtitle })] }), _jsx(NewCompanyDialog, { adapter: adapter, labels: labels })] }), _jsxs("div", { className: "mt-6 flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "relative w-full max-w-sm", children: [_jsx(Search, { className: "absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), placeholder: labels.list.searchPlaceholder, className: "pl-9" })] }), _jsxs("label", { className: "flex cursor-pointer items-center gap-2 text-sm text-muted-foreground", children: [_jsx("input", { type: "checkbox", checked: showArchived, onChange: (event) => setShowArchived(event.target.checked), className: "size-4" }), labels.list.showArchived] }), _jsx(SortControl, { columns: sortColumns, sort: view.sort, direction: view.direction, onSort: view.setSort, onDirection: view.setDirection, labels: labels })] }), companiesQuery.isError ? (_jsx("div", { className: "mt-4", children: _jsx(ErrorState, { error: companiesQuery.error, onRetry: () => companiesQuery.refetch() }) })) : companiesQuery.isLoading ? (_jsx("div", { className: "mt-4", children: _jsx(TableSkeleton, { rows: 6, columns: 3 }) })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "mt-4 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, { children: labels.list.columnCode }), _jsx(TableHead, { children: labels.list.columnName }), _jsx(TableHead, { className: "text-right", children: labels.list.columnBookedTotal }), _jsx(TableHead, { children: labels.list.columnCreatedAt }), _jsx(TableHead, { children: labels.list.columnUpdatedAt })] }) }), _jsxs(TableBody, { children: [view.pageRows.map((company) => {
+                                            const companyTotals = totals.get(company.id) ?? EMPTY_TOTALS;
+                                            return (_jsxs(TableRow, { className: cn("cursor-pointer", company.archivedAt && "opacity-60"), onClick: () => adapter.openCompany(company.id), children: [_jsx(TableCell, { className: "font-mono font-medium text-foreground", children: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [company.code, company.archivedAt && (_jsx("span", { className: "inline-flex items-center rounded-md bg-muted px-1.5 py-0.5 font-sans text-xs font-medium text-muted-foreground", children: labels.list.archivedBadge }))] }) }), _jsx(TableCell, { className: "text-foreground", children: company.name }), _jsx(TableCell, { className: "text-right tabular-nums", children: totalsReady ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "font-medium text-foreground", children: formatters.formatMoney(companyTotals.totalAmount) }), _jsx("div", { className: "text-xs text-muted-foreground", children: labels.list.invoiceCount(companyTotals.invoiceCount) })] })) : (_jsxs(_Fragment, { children: [_jsx(Skeleton, { className: "ml-auto h-4 w-24" }), _jsx(Skeleton, { className: "ml-auto mt-1.5 h-3 w-16" })] })) }), _jsx(TableCell, { className: "whitespace-nowrap text-sm text-muted-foreground", children: formatters.formatDate(company.createdAt) }), _jsx(TableCell, { className: "whitespace-nowrap text-sm text-muted-foreground", children: formatters.formatDate(company.updatedAt ?? company.createdAt) })] }, company.id));
+                                        }), view.total === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5, className: "py-12 text-center text-muted-foreground", children: labels.list.empty }) }))] })] }) }), _jsx("div", { className: "mt-4 space-y-3 sm:hidden", children: view.total === 0 ? (_jsx("p", { className: "rounded-xl border border-border bg-card px-4 py-12 text-center text-sm text-muted-foreground", children: labels.list.empty })) : (view.pageRows.map((company) => {
+                            const companyTotals = totals.get(company.id) ?? EMPTY_TOTALS;
+                            return (_jsxs("div", { className: "cursor-pointer rounded-xl border border-border bg-card p-4", onClick: () => adapter.openCompany(company.id), children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "font-mono font-medium text-foreground", children: company.code }), _jsx("div", { className: "mt-0.5 text-sm text-muted-foreground", children: company.name })] }), _jsx("div", { className: "shrink-0 text-right", children: totalsReady ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "font-medium tabular-nums text-foreground", children: formatters.formatMoney(companyTotals.totalAmount) }), _jsx("div", { className: "text-xs text-muted-foreground", children: labels.list.invoiceCount(companyTotals.invoiceCount) })] })) : (_jsxs(_Fragment, { children: [_jsx(Skeleton, { className: "ml-auto h-4 w-24" }), _jsx(Skeleton, { className: "ml-auto mt-1.5 h-3 w-16" })] })) })] }), _jsxs("div", { className: "mt-3 flex items-center justify-between border-t border-border pt-2 text-xs text-muted-foreground", children: [_jsxs("span", { children: [labels.list.columnCreatedAt, ": ", formatters.formatDate(company.createdAt)] }), _jsxs("span", { children: [labels.list.columnUpdatedAt, ":", " ", formatters.formatDate(company.updatedAt ?? company.createdAt)] })] })] }, company.id));
+                        })) })] })), !companiesQuery.isError && !companiesQuery.isLoading && view.total > 0 && (_jsx(TablePagination, { page: view.page, totalPages: view.totalPages, pageSize: view.pageSize, total: view.total, from: view.from, to: view.to, onPage: view.setPage, onPageSize: view.setPageSize }))] }));
+}
+function NewCompanyDialog({ adapter, labels, }) {
+    const [open, setOpen] = useState(false);
+    const [code, setCode] = useState("");
+    const [name, setName] = useState("");
+    const [errors, setErrors] = useState({});
+    const [isCreating, setIsCreating] = useState(false);
+    // Clear a field's error as soon as it is touched, not only on the next submit.
+    const clearError = (field) => setErrors((previous) => (previous[field] ? { ...previous, [field]: "" } : previous));
+    async function create() {
+        const validated = validateCompanyForm({ code, name }, labels.validation);
+        if (Object.keys(validated.errors).length > 0) {
+            setErrors(validated.errors);
+            return;
+        }
+        setErrors({});
+        setIsCreating(true);
+        try {
+            await adapter.createCompany({ code: validated.code, name: validated.name });
+            toast.success(labels.list.createdToast);
+            setCode("");
+            setName("");
+            setOpen(false);
+        }
+        catch (error) {
+            toast.error(labels.list.createFailedToast(readableErrorMessage(error, "")));
+        }
+        finally {
+            setIsCreating(false);
+        }
+    }
+    return (_jsxs(Dialog, { open: open, onOpenChange: (next) => {
+            setOpen(next);
+            if (next)
+                setErrors({});
+        }, children: [_jsx(DialogTrigger, { asChild: true, children: _jsxs(Button, { className: "gap-2", children: [_jsx(Plus, { className: "size-4" }), " ", labels.list.newCompanyButton] }) }), _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: labels.list.newCompanyTitle }), _jsx(DialogDescription, { children: labels.list.newCompanyDescription })] }), _jsxs("div", { className: "grid gap-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { className: "text-xs text-muted-foreground", children: [labels.list.codeFieldLabel, " ", _jsx(RequiredMark, { title: labels.requiredFieldTitle })] }), _jsx(Input, { value: code, onChange: (event) => {
+                                            setCode(event.target.value);
+                                            clearError("code");
+                                        }, placeholder: labels.list.codeFieldPlaceholder, "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.list.nameFieldLabel, " ", _jsx(RequiredMark, { title: labels.requiredFieldTitle })] }), _jsx(Input, { value: name, onChange: (event) => {
+                                            setName(event.target.value);
+                                            clearError("name");
+                                        }, placeholder: labels.list.nameFieldPlaceholder, "aria-invalid": !!errors.name }), _jsx(FieldErrorText, { text: errors.name })] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => setOpen(false), children: labels.list.cancel }), _jsx(Button, { onClick: create, disabled: isCreating, children: isCreating ? labels.list.creating : labels.list.create })] })] })] }));
+}

package/dist/pages/companies/known-spellings-card.d.ts

@@ -0,0 +1,8 @@
+import { type CompaniesAdapter } from "../../adapters/companies";
+import type { CompaniesLabels } from "./labels";
+export declare function KnownSpellingsCard({ adapter, companyCode, labels, className, }: {
+    adapter: CompaniesAdapter;
+    companyCode: string;
+    labels: CompaniesLabels["aliases"];
+    className?: string;
+}): import("react").JSX.Element;

package/dist/pages/companies/known-spellings-card.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Plus, X } from "lucide-react";
+import { toast } from "sonner";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "../../ui/alert-dialog.js";
+import { Button } from "../../ui/button.js";
+import { Input } from "../../ui/input.js";
+import { readableErrorMessage } from "../../components/feedback/query-states.js";
+import { aliasAlreadyExistsError, aliasClaimedByAnotherEntityError, } from "../../adapters/companies.js";
+// The same fold the backend's uniqueness check uses, so both agree on what a duplicate is.
+function foldedSpelling(value) {
+    return value.trim().toLowerCase().replace(/\s+/g, " ");
+}
+export function KnownSpellingsCard({ adapter, companyCode, labels, className, }) {
+    const aliasesQuery = adapter.useCompanyAliases(companyCode);
+    const [newAlias, setNewAlias] = useState("");
+    const [isAdding, setIsAdding] = useState(false);
+    const [removingAliasId, setRemovingAliasId] = useState(null);
+    const activeAliases = useMemo(() => (aliasesQuery.data ?? []).filter((alias) => alias.isActive), [aliasesQuery.data]);
+    async function addAlias() {
+        const value = newAlias.trim();
+        if (activeAliases.some((alias) => foldedSpelling(alias.alias) === foldedSpelling(value))) {
+            toast.error(labels.alreadyExistsToast);
+            return;
+        }
+        setIsAdding(true);
+        try {
+            await adapter.addCompanyAlias({ companyCode, alias: value });
+            setNewAlias("");
+            toast.success(labels.addedToast(value));
+        }
+        catch (error) {
+            const reason = readableErrorMessage(error, "");
+            if (reason === aliasClaimedByAnotherEntityError) {
+                toast.error(labels.claimedByOtherToast(value));
+            }
+            else if (reason === aliasAlreadyExistsError) {
+                toast.error(labels.alreadyExistsToast);
+            }
+            else {
+                toast.error(labels.addFailedToast(reason));
+            }
+        }
+        finally {
+            setIsAdding(false);
+        }
+    }
+    async function removeAlias(alias) {
+        setRemovingAliasId(alias.id);
+        try {
+            await adapter.removeCompanyAlias({ aliasId: alias.id });
+            toast.success(labels.removedToast(alias.alias));
+        }
+        catch (error) {
+            toast.error(labels.addFailedToast(readableErrorMessage(error, "")));
+        }
+        finally {
+            setRemovingAliasId(null);
+        }
+    }
+    return (_jsxs("section", { className: `rounded-xl border border-border bg-card p-5 ${className ?? ""}`, children: [_jsxs("div", { className: "mb-1 flex items-center justify-between gap-2", children: [_jsx("h2", { className: "text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: labels.title }), activeAliases.length > 0 && (_jsx("span", { className: "text-xs tabular-nums text-muted-foreground", children: labels.count(activeAliases.length) }))] }), _jsx("p", { className: "mb-4 text-xs text-muted-foreground", children: labels.hint }), _jsxs("div", { className: "mb-3 flex items-center gap-2", children: [_jsx(Input, { value: newAlias, onChange: (event) => setNewAlias(event.target.value), placeholder: labels.placeholder, className: "text-sm", onKeyDown: (event) => {
+                            if (event.key === "Enter" && newAlias.trim())
+                                event.currentTarget.blur();
+                        } }), _jsxs(Button, { size: "sm", variant: "outline", className: "shrink-0 gap-1.5", disabled: !newAlias.trim() || isAdding, onClick: addAlias, children: [_jsx(Plus, { className: "size-3.5" }), " ", labels.add] })] }), _jsxs("ul", { className: "max-h-[18rem] space-y-1.5 overflow-y-auto pr-1", children: [activeAliases.map((alias) => (_jsxs("li", { className: "flex items-center justify-between gap-2 rounded-md bg-muted/40 px-3 py-2 text-xs", children: [_jsx("span", { className: "min-w-0 truncate text-foreground", children: alias.alias }), _jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx("button", { className: "flex size-7 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-background hover:text-destructive", "aria-label": labels.remove, children: _jsx(X, { className: "size-3.5" }) }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: labels.confirmTitle }), _jsx(AlertDialogDescription, { children: labels.confirmDescription(alias.alias) })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: labels.confirmCancel }), _jsx(AlertDialogAction, { disabled: removingAliasId === alias.id, onClick: () => removeAlias(alias), className: "bg-destructive text-destructive-foreground hover:bg-destructive/90", children: labels.confirmRemove })] })] })] })] }, alias.id))), activeAliases.length === 0 && (_jsx("li", { className: "rounded-md border border-dashed border-border py-6 text-center text-xs text-muted-foreground", children: labels.empty }))] })] }));
+}

package/dist/pages/companies/labels.d.ts

@@ -0,0 +1,105 @@
+export interface CompaniesLabels {
+    requiredFieldTitle: string;
+    sortLabel: string;
+    sortAscending: string;
+    sortDescending: string;
+    validation: {
+        codeRequired: string;
+        codeTooLong: string;
+        codeInvalidCharacters: string;
+        nameRequired: string;
+    };
+    list: {
+        title: string;
+        subtitle: string;
+        searchPlaceholder: string;
+        showArchived: string;
+        archivedBadge: string;
+        columnCode: string;
+        columnName: string;
+        columnBookedTotal: string;
+        columnCreatedAt: string;
+        columnUpdatedAt: string;
+        invoiceCount: (count: number) => string;
+        empty: string;
+        newCompanyButton: string;
+        newCompanyTitle: string;
+        newCompanyDescription: string;
+        codeFieldLabel: string;
+        codeFieldPlaceholder: string;
+        nameFieldLabel: string;
+        nameFieldPlaceholder: string;
+        cancel: string;
+        create: string;
+        creating: string;
+        createdToast: string;
+        createFailedToast: (error: string) => string;
+    };
+    detail: {
+        backToList: string;
+        notFoundTitle: string;
+        goToList: string;
+        edit: string;
+        restore: string;
+        archive: string;
+        archiveDialogTitle: string;
+        archiveDialogDescription: string;
+        archiveDialogInvoiceNote: (count: number) => string;
+        archiveReasonPlaceholder: string;
+        archiveCancel: string;
+        archiveConfirm: string;
+        archivedToast: string;
+        archiveFailedToast: (error: string) => string;
+        restoredToast: string;
+        restoreFailedToast: (error: string) => string;
+        archivedBanner: (date: string, reason: string) => string;
+        archivedWithoutReason: string;
+        masterDataSection: string;
+        bookedSection: string;
+        codeField: string;
+        nameField: string;
+        areaField: string;
+        areaNone: string;
+        areaLabel: (area: string) => string;
+        propertiesHeading: string;
+        invoiceTotalCaption: (count: number) => string;
+        foreignPropertiesWarning: (count: number, totalAmount: string) => string;
+        foreignPropertyHint: (propertyCode: string, companyCodes: string) => string;
+        columnInvoice: string;
+        columnProperty: string;
+        columnDate: string;
+        columnAmount: string;
+        columnStatus: string;
+        withoutInvoiceNumber: string;
+        invoicesEmpty: string;
+        loadMoreRemaining: (count: number) => string;
+        invoiceStatusLabel: (status: string) => string;
+        editDialogTitle: string;
+        editDialogDescription: string;
+        cancel: string;
+        save: string;
+        saving: string;
+        savedToast: string;
+        noChangesToast: string;
+        saveFailedToast: (error: string) => string;
+    };
+    aliases: {
+        title: string;
+        count: (count: number) => string;
+        hint: string;
+        placeholder: string;
+        add: string;
+        addedToast: (alias: string) => string;
+        alreadyExistsToast: string;
+        claimedByOtherToast: (alias: string) => string;
+        addFailedToast: (error: string) => string;
+        removedToast: (alias: string) => string;
+        remove: string;
+        confirmTitle: string;
+        confirmDescription: (alias: string) => string;
+        confirmCancel: string;
+        confirmRemove: string;
+        empty: string;
+    };
+}
+export declare const englishCompaniesLabels: CompaniesLabels;

package/dist/pages/companies/labels.js

@@ -0,0 +1,104 @@
+export const englishCompaniesLabels = {
+    requiredFieldTitle: "Required field",
+    sortLabel: "Sort by",
+    sortAscending: "Ascending",
+    sortDescending: "Descending",
+    validation: {
+        codeRequired: "Please enter a code.",
+        codeTooLong: "The code may be at most 16 characters long.",
+        codeInvalidCharacters: "The code may only contain letters and digits.",
+        nameRequired: "Please enter a name.",
+    },
+    list: {
+        title: "Companies",
+        subtitle: "All companies invoices are booked against.",
+        searchPlaceholder: "Search code or name …",
+        showArchived: "Show archived",
+        archivedBadge: "Archived",
+        columnCode: "Code",
+        columnName: "Name",
+        columnBookedTotal: "Booked",
+        columnCreatedAt: "Created",
+        columnUpdatedAt: "Updated",
+        invoiceCount: (count) => `${count} ${count === 1 ? "invoice" : "invoices"}`,
+        empty: "No companies found.",
+        newCompanyButton: "New company",
+        newCompanyTitle: "Create company",
+        newCompanyDescription: "Code and name of the new company.",
+        codeFieldLabel: "Code",
+        codeFieldPlaceholder: "e.g. ACME",
+        nameFieldLabel: "Name",
+        nameFieldPlaceholder: "e.g. Acme GmbH",
+        cancel: "Cancel",
+        create: "Create",
+        creating: "Creating …",
+        createdToast: "Company created.",
+        createFailedToast: (error) => `Creating the company failed: ${error}`,
+    },
+    detail: {
+        backToList: "Back to companies",
+        notFoundTitle: "Company not found.",
+        goToList: "Go to the company list",
+        edit: "Edit",
+        restore: "Restore",
+        archive: "Archive",
+        archiveDialogTitle: "Archive this company?",
+        archiveDialogDescription: "The company is hidden from the list but nothing is deleted. It can be restored at any time.",
+        archiveDialogInvoiceNote: (count) => `${count} ${count === 1 ? "invoice is" : "invoices are"} booked against it.`,
+        archiveReasonPlaceholder: "Reason for archiving …",
+        archiveCancel: "Cancel",
+        archiveConfirm: "Archive",
+        archivedToast: "Company archived.",
+        archiveFailedToast: (error) => `Archiving failed: ${error}`,
+        restoredToast: "Company restored.",
+        restoreFailedToast: (error) => `Restoring failed: ${error}`,
+        archivedBanner: (date, reason) => `Archived on ${date} — ${reason}`,
+        archivedWithoutReason: "no reason given",
+        masterDataSection: "Master data",
+        bookedSection: "Booked invoices",
+        codeField: "Code",
+        nameField: "Name",
+        areaField: "Area of responsibility",
+        areaNone: "None",
+        areaLabel: (area) => area,
+        propertiesHeading: "Properties",
+        invoiceTotalCaption: (count) => `Total (${count} ${count === 1 ? "invoice" : "invoices"})`,
+        foreignPropertiesWarning: (count, totalAmount) => `${count} ${count === 1 ? "invoice is" : "invoices are"} booked against properties that belong to a different company (${totalAmount}).`,
+        foreignPropertyHint: (propertyCode, companyCodes) => `Property ${propertyCode} belongs to: ${companyCodes}`,
+        columnInvoice: "Invoice",
+        columnProperty: "Property",
+        columnDate: "Date",
+        columnAmount: "Amount",
+        columnStatus: "Status",
+        withoutInvoiceNumber: "No number",
+        invoicesEmpty: "No invoices yet.",
+        loadMoreRemaining: (count) => `${count} more — keep scrolling to load`,
+        invoiceStatusLabel: (status) => status,
+        editDialogTitle: "Edit company",
+        editDialogDescription: "Change the code, name or area of this company.",
+        cancel: "Cancel",
+        save: "Save",
+        saving: "Saving …",
+        savedToast: "Changes saved.",
+        noChangesToast: "Nothing was changed.",
+        saveFailedToast: (error) => `Saving failed: ${error}`,
+    },
+    aliases: {
+        title: "Known spellings",
+        count: (count) => `${count} ${count === 1 ? "entry" : "entries"}`,
+        hint: "Names on documents that should be recognized as this company.",
+        placeholder: "Add a spelling …",
+        add: "Add",
+        addedToast: (alias) => `"${alias}" added.`,
+        alreadyExistsToast: "This spelling already exists.",
+        claimedByOtherToast: (alias) => `"${alias}" is already used by another entry.`,
+        addFailedToast: (error) => `Adding the spelling failed: ${error}`,
+        removedToast: (alias) => `"${alias}" removed.`,
+        remove: "Remove spelling",
+        confirmTitle: "Remove this spelling?",
+        confirmDescription: (alias) => `"${alias}" will no longer be matched to this company.`,
+        confirmCancel: "Cancel",
+        confirmRemove: "Remove",
+        empty: "No spellings recorded yet.",
+    },
+};

package/dist/pages/companies/sort-control.d.ts

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

package/dist/pages/companies/sort-control.js

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

package/dist/pages/companies/use-infinite-rows.d.ts

@@ -0,0 +1,6 @@
+export declare function useInfiniteRows<Row>(rows: Row[], pageSize?: number): {
+    visible: Row[];
+    hasMore: boolean;
+    sentinelRef: (node: HTMLElement | null) => void;
+    total: number;
+};

package/dist/pages/companies/use-infinite-rows.js

@@ -0,0 +1,24 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+// Reveals a long list one page at a time as the reader scrolls; windows rendering, not fetching.
+export function useInfiniteRows(rows, pageSize = 25) {
+    const [visibleCount, setVisibleCount] = useState(pageSize);
+    const observerRef = useRef(null);
+    useEffect(() => {
+        setVisibleCount(pageSize);
+    }, [rows, pageSize]);
+    const hasMore = visibleCount < rows.length;
+    // Callback ref because the sentinel row mounts and unmounts as the list grows.
+    const sentinelRef = useCallback((node) => {
+        observerRef.current?.disconnect();
+        if (!node || !hasMore)
+            return;
+        observerRef.current = new IntersectionObserver((entries) => {
+            if (entries.some((entry) => entry.isIntersecting)) {
+                setVisibleCount((count) => Math.min(count + pageSize, rows.length));
+            }
+        }, { rootMargin: "120px" });
+        observerRef.current.observe(node);
+    }, [hasMore, pageSize, rows.length]);
+    useEffect(() => () => observerRef.current?.disconnect(), []);
+    return { visible: rows.slice(0, visibleCount), hasMore, sentinelRef, total: rows.length };
+}

package/dist/pages/companies/use-table-view.d.ts

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

package/dist/pages/companies/use-table-view.js

@@ -0,0 +1,56 @@
+import { useMemo, useState } from "react";
+// Client-side sort and pagination for small lists; resetKey returns to page 1 when it changes.
+export function useTableView(rows, options) {
+    const { sortValue, initialSort, initialDirection = "asc", initialPageSize = 25, resetKey, } = options;
+    const [sort, setSortState] = useState(initialSort);
+    const [direction, setDirectionState] = useState(initialDirection);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(initialPageSize);
+    // Adjust state during render so a filter change lands on page 1 without an extra paint.
+    const [seenResetKey, setSeenResetKey] = useState(resetKey);
+    if (resetKey !== seenResetKey) {
+        setSeenResetKey(resetKey);
+        setPage(1);
+    }
+    const sortedRows = useMemo(() => {
+        const copy = [...rows];
+        copy.sort((first, second) => {
+            const firstValue = sortValue(first, sort);
+            const secondValue = sortValue(second, sort);
+            const comparison = typeof firstValue === "number" && typeof secondValue === "number"
+                ? firstValue - secondValue
+                : String(firstValue).localeCompare(String(secondValue));
+            return direction === "asc" ? comparison : -comparison;
+        });
+        return copy;
+    }, [rows, sort, direction, sortValue]);
+    const total = sortedRows.length;
+    const totalPages = Math.max(1, Math.ceil(total / pageSize));
+    const safePage = Math.min(page, totalPages);
+    const from = total === 0 ? 0 : (safePage - 1) * pageSize + 1;
+    const to = Math.min(safePage * pageSize, total);
+    const pageRows = sortedRows.slice((safePage - 1) * pageSize, safePage * pageSize);
+    function setSort(key) {
+        setSortState(key);
+        setPage(1);
+    }
+    function setDirection(next) {
+        setDirectionState(next);
+        setPage(1);
+    }
+    return {
+        pageRows,
+        sort,
+        direction,
+        setSort,
+        setDirection,
+        page: safePage,
+        setPage,
+        pageSize,
+        setPageSize,
+        total,
+        totalPages,
+        from,
+        to,
+    };
+}

package/dist/pages/customers/company-chip.d.ts

@@ -0,0 +1,6 @@
+import type { CustomersLabels } from "./labels";
+export declare function CompanyChip({ code, labels, className, }: {
+    code: string | null | undefined;
+    labels: CustomersLabels["companyChip"];
+    className?: string;
+}): import("react").JSX.Element;

package/dist/pages/customers/company-chip.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/class-names.js";
+// Company code chip; a missing company renders as a warning because invoices need one.
+export function CompanyChip({ code, labels, className, }) {
+    if (!code) {
+        return (_jsx("span", { className: cn("inline-flex items-center whitespace-nowrap rounded-md bg-warning-soft px-2 py-0.5 text-xs font-medium text-warning", className), title: labels.missingTitle, children: labels.missing }));
+    }
+    return (_jsx("span", { className: cn("inline-flex items-center rounded-md bg-brand-tint px-2 py-0.5 font-mono text-xs font-medium text-brand-dark", className), children: code }));
+}

package/dist/pages/customers/copy-button.d.ts

@@ -0,0 +1,6 @@
+import type { CustomersLabels } from "./labels";
+export declare function CopyButton({ value, fieldLabel, labels, }: {
+    value: string;
+    fieldLabel: string;
+    labels: CustomersLabels["copy"];
+}): import("react").JSX.Element;

package/dist/pages/customers/copy-button.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Check, Copy } from "lucide-react";
+import { toast } from "sonner";
+import { IconAction } from "../../ui/icon-action.js";
+async function writeClipboard(text) {
+    try {
+        if (typeof navigator !== "undefined" && navigator.clipboard) {
+            await navigator.clipboard.writeText(text);
+            return true;
+        }
+    }
+    catch {
+        return false;
+    }
+    return false;
+}
+export function CopyButton({ value, fieldLabel, labels, }) {
+    const [copied, setCopied] = useState(false);
+    async function copyValue() {
+        if (await writeClipboard(value)) {
+            setCopied(true);
+            toast.success(labels.copied(fieldLabel));
+            window.setTimeout(() => setCopied(false), 1500);
+        }
+        else {
+            toast.error(labels.failed);
+        }
+    }
+    return (_jsx(IconAction, { label: labels.action(fieldLabel), className: "size-7 shrink-0", onClick: copyValue, children: copied ? _jsx(Check, { className: "size-3.5 text-brand" }) : _jsx(Copy, { className: "size-3.5" }) }));
+}

package/dist/pages/customers/customer-detail-page.d.ts

@@ -0,0 +1,10 @@
+import { type Formatters } from "../../lib/formatters";
+import type { CustomersAdapter } from "../../adapters/customers";
+import { type CustomersLabels } from "./labels";
+export interface CustomerDetailPageProps {
+    adapter: CustomersAdapter;
+    customerId: string;
+    labels?: CustomersLabels;
+    formatters?: Formatters;
+}
+export declare function CustomerDetailPage({ adapter, customerId, labels, formatters, }: CustomerDetailPageProps): import("react").JSX.Element;