@hub-kit/core 0.3.0

package/dist/pages/properties/company-assignment-field.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label } from "../../ui/label.js";
+import { MultiCombobox } from "../../ui/multi-combobox.js";
+import { RequiredMark } from "./form-field.js";
+// Direct property-to-company assignment; several companies are normal, at least one is required.
+export function CompanyAssignmentField({ values, onValuesChange, companies, labels, requiredFieldTitle, error, disabled, }) {
+    const options = companies.map((company) => ({
+        value: company.id,
+        label: `${company.code} · ${company.name}`,
+        keywords: company.name,
+    }));
+    return (_jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { className: "text-xs text-muted-foreground", children: [labels.label, " ", _jsx(RequiredMark, { title: requiredFieldTitle })] }), _jsx(MultiCombobox, { values: values, onValuesChange: onValuesChange, options: options, placeholder: labels.placeholder, disabled: disabled, className: error ? "border-destructive" : undefined }), error ? _jsx("p", { className: "text-xs text-destructive", children: labels.required }) : null] }));
+}

package/dist/pages/properties/form-field.d.ts

@@ -0,0 +1,6 @@
+export declare function RequiredMark({ title }: {
+    title: string;
+}): import("react").JSX.Element;
+export declare function FieldErrorText({ text }: {
+    text?: string;
+}): import("react").JSX.Element | null;

package/dist/pages/properties/form-field.js

@@ -0,0 +1,9 @@
+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 });
+}

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

@@ -0,0 +1,124 @@
+import type { PropertyVatStatus } from "../../adapters/properties";
+export interface PropertiesLabels {
+    vatStatus: Record<PropertyVatStatus, string>;
+    noneOption: string;
+    requiredFieldTitle: string;
+    invoiceStatusLabel: (status: string) => string;
+    sort: {
+        label: string;
+        ascending: string;
+        descending: string;
+    };
+    moreRows: (count: number) => string;
+    companyChip: {
+        missing: string;
+        missingTitle: string;
+    };
+    vatBadge: {
+        abbreviation: string;
+        relevantTitle: string;
+        exempt: string;
+        exemptTitle: string;
+        unclear: string;
+        unclearTitle: string;
+        mixed: string;
+        mixedTitle: (rates: string) => string;
+    };
+    companyAssignment: {
+        label: string;
+        placeholder: string;
+        required: string;
+    };
+    nameVariants: {
+        title: string;
+        count: (count: number) => string;
+        hint: string;
+        placeholder: string;
+        add: string;
+        remove: string;
+        empty: string;
+        confirmTitle: string;
+        confirmDescription: (variant: string) => string;
+        confirmCancel: string;
+        confirmRemove: string;
+        added: (variant: string) => string;
+        removed: (variant: string) => string;
+        alreadyExists: string;
+        claimedByOther: (variant: string) => string;
+        failed: (error: string) => string;
+    };
+    list: {
+        title: string;
+        subtitle: string;
+        searchPlaceholder: string;
+        columns: {
+            property: string;
+            company: string;
+            booked: string;
+            createdAt: string;
+            updatedAt: string;
+        };
+        invoiceCount: (count: number) => string;
+        empty: string;
+        create: {
+            button: string;
+            title: string;
+            description: string;
+            codeLabel: string;
+            codePlaceholder: string;
+            nameLabel: string;
+            namePlaceholder: string;
+            addressLabel: string;
+            addressPlaceholder: string;
+            vatStatusLabel: string;
+            cancel: string;
+            submit: string;
+            submitting: string;
+            codeRequired: string;
+            codeTooLong: string;
+            codeTaken: string;
+            created: string;
+            createdWithoutCompany: (code: string, error: string) => string;
+            createFailed: (error: string) => string;
+        };
+    };
+    detail: {
+        back: string;
+        editTitle: string;
+        editDescription: string;
+        notInMasterDataBefore: string;
+        notInMasterDataAfter: string;
+        createNow: string;
+        masterDataSection: string;
+        bookedSection: string;
+        fields: {
+            code: string;
+            name: string;
+            address: string;
+            company: string;
+            vatStatus: string;
+        };
+        invoiceCount: (count: number) => string;
+        noInvoices: string;
+        columns: {
+            supplier: string;
+            company: string;
+            date: string;
+            vat: string;
+            amount: string;
+            status: string;
+        };
+        withoutNumber: string;
+        edit: string;
+        cancel: string;
+        save: string;
+        saving: string;
+        companyMismatchWarning: (count: number, assignedCodes: string) => string;
+        companyMismatchRow: string;
+        noChanges: string;
+        saved: string;
+        partiallySaved: (error: string) => string;
+        saveFailed: (error: string) => string;
+    };
+}
+export declare const englishPropertiesLabels: PropertiesLabels;

package/dist/pages/properties/labels.js

@@ -0,0 +1,128 @@
+export const englishPropertiesLabels = {
+    vatStatus: {
+        taxable: "Taxable",
+        taxExempt: "Tax-exempt",
+        mixed: "Mixed",
+    },
+    noneOption: "None",
+    requiredFieldTitle: "Required field",
+    invoiceStatusLabel: (status) => status,
+    sort: {
+        label: "Sort by",
+        ascending: "Ascending",
+        descending: "Descending",
+    },
+    moreRows: (count) => `… ${count} more ${count === 1 ? "entry" : "entries"}`,
+    companyChip: {
+        missing: "No company",
+        missingTitle: "not assigned to a company",
+    },
+    vatBadge: {
+        abbreviation: "VAT",
+        relevantTitle: "VAT relevant (input tax)",
+        exempt: "VAT exempt",
+        exemptTitle: "The document states 0 % VAT, for example an exempt supply or a small-business supplier.",
+        unclear: "VAT unclear",
+        unclearTitle: "No VAT rate was recognized on this document.",
+        mixed: "VAT mixed",
+        mixedTitle: (rates) => `This document has more than one VAT rate (${rates} %). The split is shown in the detail view.`,
+    },
+    companyAssignment: {
+        label: "Company/companies",
+        placeholder: "Select company/companies",
+        required: "At least one company is required.",
+    },
+    nameVariants: {
+        title: "Name variants",
+        count: (count) => `${count} ${count === 1 ? "variant" : "variants"}`,
+        hint: "Name variants this property appears under on documents. The pipeline uses them to assign documents automatically.",
+        placeholder: "New variant …",
+        add: "Add",
+        remove: "Remove",
+        empty: "No name variants on file.",
+        confirmTitle: "Remove variant?",
+        confirmDescription: (variant) => `“${variant}” will no longer be listed as a name variant. It can be added again at any time.`,
+        confirmCancel: "Cancel",
+        confirmRemove: "Remove",
+        added: (variant) => `Variant “${variant}” added.`,
+        removed: (variant) => `Variant “${variant}” removed.`,
+        alreadyExists: "That variant is already on file.",
+        claimedByOther: (variant) => `“${variant}” already belongs to another entity. A variant can name only one, so remove it there first.`,
+        failed: (error) => `Could not save: ${error}`,
+    },
+    list: {
+        title: "Properties",
+        subtitle: "Property master data: real estate/projects invoices are assigned to.",
+        searchPlaceholder: "Search property …",
+        columns: {
+            property: "Property (code / address)",
+            company: "Company",
+            booked: "Booked",
+            createdAt: "Created",
+            updatedAt: "Updated",
+        },
+        invoiceCount: (count) => `${count} ${count === 1 ? "invoice" : "invoices"}`,
+        empty: "No properties in the master data.",
+        create: {
+            button: "New",
+            title: "New property",
+            description: "Create property master data. The code must be unique.",
+            codeLabel: "Code",
+            codePlaceholder: "e.g. WIBO7",
+            nameLabel: "Name",
+            namePlaceholder: "Label",
+            addressLabel: "Address",
+            addressPlaceholder: "Street, city",
+            vatStatusLabel: "VAT status",
+            cancel: "Cancel",
+            submit: "Create",
+            submitting: "Creating …",
+            codeRequired: "Please enter a code, e.g. MA-OMS.",
+            codeTooLong: "The code may be at most 32 characters long.",
+            codeTaken: "This code is already taken.",
+            created: "Property created.",
+            createdWithoutCompany: (code, error) => `Property ${code} created, but the company/companies could not be saved: ${error}. Please add it on the property page.`,
+            createFailed: (error) => `Creation failed: ${error}`,
+        },
+    },
+    detail: {
+        back: "Properties",
+        editTitle: "Edit property",
+        editDescription: "Edit property master data.",
+        notInMasterDataBefore: "This property (",
+        notInMasterDataAfter: ') is not in the property master data. The code comes from AI extraction. Create it under "Properties" to permanently assign invoices to it.',
+        createNow: "Create now",
+        masterDataSection: "Master data",
+        bookedSection: "Booked to this property",
+        fields: {
+            code: "Code",
+            name: "Name",
+            address: "Address",
+            company: "Company",
+            vatStatus: "VAT status",
+        },
+        invoiceCount: (count) => `${count} ${count === 1 ? "invoice" : "invoices"}`,
+        noInvoices: "No invoices are booked to this property.",
+        columns: {
+            supplier: "Supplier / no.",
+            company: "Co.",
+            date: "Date",
+            vat: "VAT",
+            amount: "Amount",
+            status: "Status",
+        },
+        withoutNumber: "no number",
+        edit: "Edit",
+        cancel: "Cancel",
+        save: "Save",
+        saving: "Saving …",
+        companyMismatchWarning: (count, assignedCodes) => count === 1
+            ? `1 invoice is booked to a company this property is not assigned to (assigned: ${assignedCodes}).`
+            : `${count} invoices are booked to companies this property is not assigned to (assigned: ${assignedCodes}).`,
+        companyMismatchRow: "Company differs from this property's assignment.",
+        noChanges: "No changes.",
+        saved: "Saved.",
+        partiallySaved: (error) => `Master data saved, but the company/companies could not be updated: ${error}`,
+        saveFailed: (error) => `Saving failed: ${error}`,
+    },
+};

package/dist/pages/properties/name-variants-card.d.ts

@@ -0,0 +1,7 @@
+import type { PropertiesAdapter } from "../../adapters/properties";
+import type { PropertiesLabels } from "./labels";
+export declare function NameVariantsCard({ propertyCode, adapter, labels, }: {
+    propertyCode: string;
+    adapter: PropertiesAdapter;
+    labels: PropertiesLabels["nameVariants"];
+}): import("react").JSX.Element;

package/dist/pages/properties/name-variants-card.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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";
+// The spellings this property is known by on documents; the pipeline resolves them to its code.
+export function NameVariantsCard({ propertyCode, adapter, labels, }) {
+    const variantsQuery = adapter.useNameVariants(propertyCode);
+    const [newVariant, setNewVariant] = useState("");
+    const [isAdding, setIsAdding] = useState(false);
+    const [isRemoving, setIsRemoving] = useState(false);
+    const variants = variantsQuery.data ?? [];
+    // Case and inner spacing only, so this check agrees with the server on what counts as the same.
+    const folded = (value) => value.trim().toLowerCase().replace(/\s+/g, " ");
+    async function addVariant() {
+        const text = newVariant.trim();
+        if (variants.some((variant) => folded(variant.text) === folded(text))) {
+            toast.error(labels.alreadyExists);
+            return;
+        }
+        setIsAdding(true);
+        try {
+            await adapter.addNameVariant({ propertyCode, text });
+            setNewVariant("");
+            toast.success(labels.added(text));
+        }
+        catch (error) {
+            const reason = adapter.nameVariantRejectionReason(error);
+            if (reason === "claimedByOther")
+                toast.error(labels.claimedByOther(text));
+            else if (reason === "alreadyExists")
+                toast.error(labels.alreadyExists);
+            else
+                toast.error(labels.failed(readableErrorMessage(error, "")));
+        }
+        finally {
+            setIsAdding(false);
+        }
+    }
+    async function removeVariant(variantId, text) {
+        setIsRemoving(true);
+        try {
+            await adapter.removeNameVariant({ propertyCode, variantId });
+            toast.success(labels.removed(text));
+        }
+        catch (error) {
+            toast.error(labels.failed(readableErrorMessage(error, "")));
+        }
+        finally {
+            setIsRemoving(false);
+        }
+    }
+    return (_jsxs("section", { className: "rounded-xl border border-border bg-card p-5", 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 }), variants.length > 0 && (_jsx("span", { className: "text-xs tabular-nums text-muted-foreground", children: labels.count(variants.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: newVariant, onChange: (event) => setNewVariant(event.target.value), placeholder: labels.placeholder, className: "text-sm", onKeyDown: (event) => {
+                            if (event.key === "Enter" && newVariant.trim())
+                                event.currentTarget.blur();
+                        } }), _jsxs(Button, { size: "sm", variant: "outline", className: "shrink-0 gap-1.5", disabled: !newVariant.trim() || isAdding, onClick: () => void addVariant(), 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: [variants.map((variant) => (_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: variant.text }), _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(variant.text) })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: labels.confirmCancel }), _jsx(AlertDialogAction, { disabled: isRemoving, onClick: () => void removeVariant(variant.id, variant.text), className: "bg-destructive text-destructive-foreground hover:bg-destructive/90", children: labels.confirmRemove })] })] })] })] }, variant.id))), variants.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/properties/property-detail-page.d.ts

@@ -0,0 +1,10 @@
+import { type Formatters } from "../../lib/formatters";
+import type { PropertiesAdapter } from "../../adapters/properties";
+import { type PropertiesLabels } from "./labels";
+export interface PropertyDetailPageProps {
+    propertyCode: string;
+    adapter: PropertiesAdapter;
+    labels?: PropertiesLabels;
+    formatters?: Formatters;
+}
+export declare function PropertyDetailPage({ propertyCode, adapter, labels, formatters, }: PropertyDetailPageProps): import("react").JSX.Element;

package/dist/pages/properties/property-detail-page.js

@@ -0,0 +1,150 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { ArrowLeft, Building2, Pencil, Plus, TriangleAlert } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "../../ui/button.js";
+import { Combobox } from "../../ui/combobox.js";
+import { Input } from "../../ui/input.js";
+import { Label } from "../../ui/label.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } 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 { englishFormatters } from "../../lib/formatters.js";
+import { CompanyChip, InvoiceStatusBadge, VatBadge } from "./badges.js";
+import { CompanyAssignmentField } from "./company-assignment-field.js";
+import { NameVariantsCard } from "./name-variants-card.js";
+import { useInfiniteRows } from "./use-infinite-rows.js";
+import { englishPropertiesLabels } from "./labels.js";
+const NONE = "__none";
+const VAT_STATUS_OPTIONS = ["taxable", "taxExempt", "mixed"];
+function editFormFrom(property, companyIds) {
+    return {
+        name: property.name ?? "",
+        address: property.address ?? "",
+        vatStatus: property.vatStatus ?? NONE,
+        companyIds,
+    };
+}
+export function PropertyDetailPage({ propertyCode, adapter, labels = englishPropertiesLabels, formatters = englishFormatters, }) {
+    const detailLabels = labels.detail;
+    const propertyQuery = adapter.useProperty(propertyCode);
+    const companiesQuery = adapter.useCompanies();
+    const companyIdsQuery = adapter.useCompanyIdsByPropertyId();
+    const invoicesQuery = adapter.usePropertyInvoices(propertyCode);
+    const property = propertyQuery.data ?? null;
+    const invoices = useMemo(() => (invoicesQuery.data ?? [])
+        .slice()
+        .sort((left, right) => (right.documentDate ?? "").localeCompare(left.documentDate ?? "")), [invoicesQuery.data]);
+    // Rendered a page at a time; the aggregates below still see every row.
+    const invoicePage = useInfiniteRows(invoices, 25);
+    const bookedTotal = invoices.reduce((sum, invoice) => sum + (invoice.amountGross ?? 0), 0);
+    const [editOpen, setEditOpen] = useState(false);
+    const [formState, setFormState] = useState(null);
+    const [companyError, setCompanyError] = useState(false);
+    const [isSaving, setIsSaving] = useState(false);
+    if (invoicesQuery.isError) {
+        return _jsx(ErrorState, { error: invoicesQuery.error, onRetry: () => invoicesQuery.refetch() });
+    }
+    // The property's companies come from the direct, possibly multi-valued assignment.
+    const companyById = new Map((companiesQuery.data ?? []).map((company) => [company.id, company]));
+    const companies = [];
+    if (property) {
+        for (const companyId of companyIdsQuery.data?.[property.id] ?? []) {
+            const company = companyById.get(companyId);
+            if (company && !companies.some((entry) => entry.code === company.code))
+                companies.push(company);
+        }
+        companies.sort((left, right) => left.code.localeCompare(right.code));
+    }
+    const currentCompanyIds = companies.map((company) => company.id);
+    // Warn only where an explicit assignment exists and the invoice disagrees with it.
+    const assignedCodes = new Set(companies.map((company) => company.code));
+    const companyMismatch = (invoiceCompanyCode) => !!invoiceCompanyCode && assignedCodes.size > 0 && !assignedCodes.has(invoiceCompanyCode);
+    const mismatchCount = invoices.filter((invoice) => companyMismatch(invoice.companyCode)).length;
+    const form = formState ?? (property ? editFormFrom(property, currentCompanyIds) : null);
+    const setFormValue = (key, value) => setFormState((previous) => ({
+        ...(previous ?? (property ? editFormFrom(property, currentCompanyIds) : {})),
+        [key]: value,
+    }));
+    const setCompanyIds = (ids) => {
+        setCompanyError(false);
+        setFormState((previous) => ({
+            ...(previous ?? (property ? editFormFrom(property, currentCompanyIds) : {})),
+            companyIds: ids,
+        }));
+    };
+    function startEditing() {
+        if (property)
+            setFormState(editFormFrom(property, currentCompanyIds));
+        setCompanyError(false);
+        setEditOpen(true);
+    }
+    function cancelEditing() {
+        setFormState(null);
+        setCompanyError(false);
+        setEditOpen(false);
+    }
+    async function save() {
+        if (!property || !form)
+            return;
+        if (form.companyIds.length === 0) {
+            setCompanyError(true);
+            return;
+        }
+        const changes = {};
+        const name = form.name.trim() || null;
+        const address = form.address.trim() || null;
+        const vatStatus = form.vatStatus === NONE ? null : form.vatStatus;
+        if (name !== (property.name ?? null))
+            changes.name = name;
+        if (address !== (property.address ?? null))
+            changes.address = address;
+        if (vatStatus !== (property.vatStatus ?? null))
+            changes.vatStatus = vatStatus;
+        const companiesChanged = form.companyIds.slice().sort().join(",") !== currentCompanyIds.slice().sort().join(",");
+        if (Object.keys(changes).length === 0 && !companiesChanged) {
+            toast.info(detailLabels.noChanges);
+            setEditOpen(false);
+            return;
+        }
+        // Sequential, not parallel: on a partial failure the user needs to know which half went through.
+        let fieldsSaved = false;
+        setIsSaving(true);
+        try {
+            if (Object.keys(changes).length > 0) {
+                await adapter.updateProperty({ propertyId: property.id, changes });
+            }
+            fieldsSaved = true;
+            if (companiesChanged) {
+                await adapter.setPropertyCompanies({
+                    propertyId: property.id,
+                    companyIds: form.companyIds,
+                });
+            }
+            toast.success(detailLabels.saved);
+            setFormState(null);
+            setEditOpen(false);
+        }
+        catch (error) {
+            const message = readableErrorMessage(error, "");
+            toast.error(fieldsSaved ? detailLabels.partiallySaved(message) : detailLabels.saveFailed(message));
+            // The dialog stays open either way so the user can retry the part that failed.
+        }
+        finally {
+            setIsSaving(false);
+        }
+    }
+    return (_jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => adapter.openPropertyList(), 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" }), " ", detailLabels.back] }), _jsxs("div", { className: "mt-2 flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx("span", { className: "grid size-10 place-items-center rounded-lg bg-brand-wash text-brand-dark", children: _jsx(Building2, { className: "size-5" }) }), _jsxs("h1", { className: "text-2xl font-semibold tracking-tight text-foreground", children: [_jsx("span", { className: "font-mono", children: propertyCode }), property?.name ? _jsx("span", { className: "ml-2 font-sans", children: property.name }) : null] }), companies.map((company) => (_jsx(CompanyChip, { code: company.code, labels: labels.companyChip }, company.code)))] }), property ? (_jsxs(Button, { onClick: startEditing, className: "gap-2", children: [_jsx(Pencil, { className: "size-4" }), " ", detailLabels.edit] })) : null] }), _jsxs("div", { className: "mt-6 grid gap-6 lg:grid-cols-[1fr_1.1fr]", children: [_jsxs("div", { className: "space-y-6", children: [propertyQuery.isLoading ? (_jsx(TableSkeleton, { rows: 3, columns: 2 })) : !property ? (_jsxs("div", { className: "rounded-xl border border-warning/30 bg-warning-soft p-4 text-sm text-foreground", children: [_jsxs("p", { children: [detailLabels.notInMasterDataBefore, _jsx("span", { className: "font-mono", children: propertyCode }), detailLabels.notInMasterDataAfter] }), _jsxs(Button, { size: "sm", className: "mt-3 gap-1.5", onClick: () => adapter.openPropertyCreate(propertyCode), children: [_jsx(Plus, { className: "size-4" }), " ", detailLabels.createNow] })] })) : (_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: detailLabels.masterDataSection }), _jsxs("dl", { className: "grid gap-3 sm:grid-cols-2", children: [_jsxs("div", { children: [_jsx("dt", { className: "text-xs text-muted-foreground", children: detailLabels.fields.code }), _jsx("dd", { className: "font-mono text-sm text-foreground", children: property.code })] }), _jsxs("div", { children: [_jsx("dt", { className: "text-xs text-muted-foreground", children: detailLabels.fields.name }), _jsx("dd", { className: "text-sm text-foreground", children: property.name ?? "—" })] }), _jsxs("div", { children: [_jsx("dt", { className: "text-xs text-muted-foreground", children: detailLabels.fields.address }), _jsx("dd", { className: "text-sm text-foreground", children: property.address ?? "—" })] }), _jsxs("div", { children: [_jsx("dt", { className: "text-xs text-muted-foreground", children: detailLabels.fields.company }), _jsx("dd", { className: "text-sm text-foreground", children: companies.length
+                                                            ? companies
+                                                                .map((company) => `${company.code} · ${company.name}`)
+                                                                .join(", ")
+                                                            : "—" })] }), _jsxs("div", { children: [_jsx("dt", { className: "text-xs text-muted-foreground", children: detailLabels.fields.vatStatus }), _jsx("dd", { className: "text-sm text-foreground", children: property.vatStatus ? labels.vatStatus[property.vatStatus] : "—" })] })] })] })), _jsx(NameVariantsCard, { propertyCode: propertyCode, adapter: adapter, labels: labels.nameVariants })] }), _jsx("div", { className: "space-y-6", children: invoicesQuery.isLoading ? (_jsx(TableSkeleton, { rows: 5, columns: 6 })) : invoices.length === 0 ? (_jsx("div", { className: "rounded-xl border border-border bg-card p-8 text-center text-sm text-muted-foreground", children: detailLabels.noInvoices })) : (_jsxs("section", { className: "rounded-xl border border-border bg-card p-5", children: [_jsxs("div", { className: "mb-4 flex items-center justify-between", children: [_jsx("h2", { className: "text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: detailLabels.bookedSection }), _jsxs("div", { className: "rounded-lg bg-muted/40 px-3 py-1.5 text-right", children: [_jsxs("span", { className: "text-xs text-muted-foreground", children: [detailLabels.invoiceCount(invoices.length), " \u00B7", " "] }), _jsx("span", { className: "font-semibold tabular-nums text-foreground", children: formatters.formatMoney(bookedTotal) })] })] }), mismatchCount > 0 && (_jsxs("div", { className: "mb-4 flex items-start gap-2 rounded-lg border border-warning/30 bg-warning-soft px-3 py-2.5 text-sm text-foreground", children: [_jsx(TriangleAlert, { className: "mt-0.5 size-4 shrink-0 text-warning" }), _jsx("span", { children: detailLabels.companyMismatchWarning(mismatchCount, companies.map((company) => company.code).join(", ")) })] })), _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: detailLabels.columns.supplier }), _jsx(TableHead, { children: detailLabels.columns.company }), _jsx(TableHead, { children: detailLabels.columns.date }), _jsx(TableHead, { children: detailLabels.columns.vat }), _jsx(TableHead, { className: "text-right", children: detailLabels.columns.amount }), _jsx(TableHead, { children: detailLabels.columns.status })] }) }), _jsxs(TableBody, { children: [invoicePage.visible.map((invoice) => (_jsxs(TableRow, { className: "cursor-pointer", onClick: () => adapter.openInvoice(invoice.id), children: [_jsxs(TableCell, { children: [_jsx("div", { className: "font-medium text-foreground", children: invoice.supplierName ?? "—" }), _jsx("div", { className: "text-xs text-muted-foreground", children: invoice.invoiceNumber ?? detailLabels.withoutNumber })] }), _jsx(TableCell, { children: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(CompanyChip, { code: invoice.companyCode, labels: labels.companyChip }), companyMismatch(invoice.companyCode) && (_jsx("span", { title: detailLabels.companyMismatchRow, children: _jsx(TriangleAlert, { className: "size-3.5 shrink-0 text-warning", "aria-label": detailLabels.companyMismatchRow }) }))] }) }), _jsx(TableCell, { className: "text-sm text-muted-foreground tabular-nums", children: formatters.formatDate(invoice.documentDate) }), _jsx(TableCell, { children: _jsx(VatBadge, { vatRate: invoice.vatRate, vatLines: invoice.vatLines, labels: labels.vatBadge }) }), _jsx(TableCell, { className: "text-right font-medium tabular-nums", children: formatters.formatMoney(invoice.amountGross) }), _jsx(TableCell, { children: _jsx(InvoiceStatusBadge, { status: invoice.status, tone: invoice.status
+                                                                            ? adapter.invoiceStatusTone[invoice.status]
+                                                                            : undefined, statusLabel: labels.invoiceStatusLabel }) })] }, invoice.id))), invoicePage.hasMore && (_jsx(TableRow, { ref: invoicePage.sentinelRef, children: _jsx(TableCell, { colSpan: 99, className: "py-3 text-center text-xs text-muted-foreground", children: labels.moreRows(invoicePage.total - invoicePage.visible.length) }) }))] })] }) }) })] })) })] }), _jsx(Dialog, { open: editOpen, onOpenChange: (open) => (open ? undefined : cancelEditing()), children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: detailLabels.editTitle }), _jsx(DialogDescription, { children: detailLabels.editDescription })] }), form && (_jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsxs("div", { className: "space-y-1 sm:col-span-2", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: detailLabels.fields.name }), _jsx(Input, { value: form.name, onChange: (event) => setFormValue("name", event.target.value) })] }), _jsxs("div", { className: "space-y-1 sm:col-span-2", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: detailLabels.fields.address }), _jsx(Input, { value: form.address, onChange: (event) => setFormValue("address", event.target.value) })] }), _jsx("div", { className: "sm:col-span-2", children: _jsx(CompanyAssignmentField, { values: form.companyIds, onValuesChange: setCompanyIds, companies: companiesQuery.data ?? [], labels: labels.companyAssignment, requiredFieldTitle: labels.requiredFieldTitle, error: companyError }) }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: detailLabels.fields.vatStatus }), _jsx(Combobox, { value: form.vatStatus, onValueChange: (value) => setFormValue("vatStatus", value), placeholder: "\u2014", options: [
+                                                { value: NONE, label: labels.noneOption },
+                                                ...VAT_STATUS_OPTIONS.map((status) => ({
+                                                    value: status,
+                                                    label: labels.vatStatus[status],
+                                                })),
+                                            ] })] })] })), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: cancelEditing, children: detailLabels.cancel }), _jsx(Button, { onClick: () => void save(), disabled: isSaving, children: isSaving ? detailLabels.saving : detailLabels.save })] })] }) })] }));
+}

package/dist/pages/properties/property-list-page.d.ts

@@ -0,0 +1,13 @@
+import { type Formatters } from "../../lib/formatters";
+import type { PropertiesAdapter } from "../../adapters/properties";
+import { type PropertiesLabels } from "./labels";
+export interface PropertyListPageProps {
+    adapter: PropertiesAdapter;
+    labels?: PropertiesLabels;
+    formatters?: Formatters;
+    /** Opens the create dialog pre-filled with this code (deep link from other screens). */
+    initialCreateCode?: string;
+    /** Called once the pre-filled code was applied, so the host can clear its URL parameter. */
+    onInitialCreateCodeConsumed?: () => void;
+}
+export declare function PropertyListPage({ adapter, labels, formatters, initialCreateCode, onInitialCreateCodeConsumed, }: PropertyListPageProps): import("react").JSX.Element;