@hub-kit/core 0.3.0

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

@@ -0,0 +1,201 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { Plus, Search } 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, 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 { englishFormatters } from "../../lib/formatters.js";
+import { CompanyChip } from "./badges.js";
+import { CompanyAssignmentField } from "./company-assignment-field.js";
+import { FieldErrorText, RequiredMark } from "./form-field.js";
+import { SortControl } from "./sort-control.js";
+import { useTableView } from "./use-table-view.js";
+import { englishPropertiesLabels } from "./labels.js";
+const NONE = "__none";
+const VAT_STATUS_OPTIONS = ["taxable", "taxExempt", "mixed"];
+export function PropertyListPage({ adapter, labels = englishPropertiesLabels, formatters = englishFormatters, initialCreateCode, onInitialCreateCodeConsumed, }) {
+    const propertiesQuery = adapter.useProperties();
+    const totalsQuery = adapter.useInvoiceTotalsByPropertyId();
+    const companiesQuery = adapter.useCompanies();
+    const companyIdsQuery = adapter.useCompanyIdsByPropertyId();
+    const [searchInput, setSearchInput] = useState("");
+    const companyById = useMemo(() => new Map((companiesQuery.data ?? []).map((company) => [company.id, company])), [companiesQuery.data]);
+    const companiesByPropertyId = useMemo(() => {
+        const result = new Map();
+        for (const [propertyId, companyIds] of Object.entries(companyIdsQuery.data ?? {})) {
+            const list = [];
+            for (const companyId of companyIds) {
+                const company = companyById.get(companyId);
+                if (company && !list.some((entry) => entry.code === company.code))
+                    list.push(company);
+            }
+            list.sort((left, right) => left.code.localeCompare(right.code));
+            result.set(propertyId, list);
+        }
+        return result;
+    }, [companyIdsQuery.data, companyById]);
+    const totals = totalsQuery.data ?? {};
+    // Wait for every query that feeds a visible cell, so real rows never paint with zero totals.
+    const isLoading = propertiesQuery.isLoading ||
+        totalsQuery.isLoading ||
+        companiesQuery.isLoading ||
+        companyIdsQuery.isLoading;
+    const filtered = useMemo(() => {
+        const term = searchInput.trim().toLowerCase();
+        return (propertiesQuery.data ?? []).filter((property) => !term ||
+            `${property.code} ${property.name ?? ""} ${property.address ?? ""}`
+                .toLowerCase()
+                .includes(term));
+    }, [propertiesQuery.data, searchInput]);
+    const view = useTableView(filtered, {
+        initialSort: "updatedAt",
+        initialDirection: "desc",
+        resetKey: searchInput,
+        sortValue: (property, key) => {
+            const propertyTotals = totals[property.id] ?? { bookedAmount: 0, invoiceCount: 0 };
+            switch (key) {
+                case "company":
+                    return (companiesByPropertyId.get(property.id) ?? [])
+                        .map((company) => company.code)
+                        .join(",");
+                case "booked":
+                    return propertyTotals.bookedAmount;
+                case "createdAt":
+                    return property.createdAt ?? "";
+                case "updatedAt":
+                    return property.updatedAt ?? property.createdAt ?? "";
+                default:
+                    return property.code ?? "";
+            }
+        },
+    });
+    const sortColumns = [
+        { value: "code", label: labels.list.columns.property },
+        { value: "company", label: labels.list.columns.company },
+        { value: "booked", label: labels.list.columns.booked },
+        { value: "createdAt", label: labels.list.columns.createdAt },
+        { value: "updatedAt", label: labels.list.columns.updatedAt },
+    ];
+    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(NewPropertyDialog, { adapter: adapter, labels: labels, initialCode: initialCreateCode, onInitialCodeConsumed: onInitialCreateCodeConsumed })] }), _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: searchInput, onChange: (event) => setSearchInput(event.target.value), placeholder: labels.list.searchPlaceholder, className: "pl-9" })] }), _jsx(SortControl, { columns: sortColumns, sort: view.sort, direction: view.direction, onSort: view.setSort, onDirection: view.setDirection, labels: labels.sort })] }), propertiesQuery.isError ? (_jsx("div", { className: "mt-4", children: _jsx(ErrorState, { error: propertiesQuery.error, onRetry: () => propertiesQuery.refetch() }) })) : isLoading ? (_jsx("div", { className: "mt-4", children: _jsx(TableSkeleton, { rows: 6, columns: 3 }) })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "mt-6 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.columns.property }), _jsx(TableHead, { children: labels.list.columns.company }), _jsx(TableHead, { className: "text-right", children: labels.list.columns.booked }), _jsx(TableHead, { children: labels.list.columns.createdAt }), _jsx(TableHead, { children: labels.list.columns.updatedAt })] }) }), _jsxs(TableBody, { children: [view.pageRows.map((property) => {
+                                            const companies = companiesByPropertyId.get(property.id) ?? [];
+                                            const propertyTotals = totals[property.id] ?? {
+                                                bookedAmount: 0,
+                                                invoiceCount: 0,
+                                            };
+                                            return (_jsxs(TableRow, { className: "cursor-pointer", onClick: () => adapter.openProperty(property.code), children: [_jsxs(TableCell, { children: [_jsxs("div", { className: "font-medium text-foreground", children: [_jsx("span", { className: "font-mono", children: property.code }), property.name ? (_jsx("span", { className: "ml-2 font-sans", children: property.name })) : null] }), property.address ? (_jsx("div", { className: "text-xs text-muted-foreground", children: property.address })) : null] }), _jsx(TableCell, { children: companies.length ? (_jsx("div", { className: "flex flex-wrap gap-1", children: companies.map((company) => (_jsx(CompanyChip, { code: company.code, labels: labels.companyChip }, company.code))) })) : (_jsx(CompanyChip, { code: null, labels: labels.companyChip })) }), _jsxs(TableCell, { className: "text-right tabular-nums", children: [_jsx("div", { className: "font-medium text-foreground", children: formatters.formatMoney(propertyTotals.bookedAmount) }), _jsx("div", { className: "text-xs text-muted-foreground", children: labels.list.invoiceCount(propertyTotals.invoiceCount) })] }), _jsx(TableCell, { className: "whitespace-nowrap text-sm text-muted-foreground", children: formatters.formatDate(property.createdAt) }), _jsx(TableCell, { className: "whitespace-nowrap text-sm text-muted-foreground", children: formatters.formatDate(property.updatedAt ?? property.createdAt) })] }, property.id));
+                                        }), view.total === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5, className: "py-12 text-center text-muted-foreground", children: labels.list.empty }) }))] })] }) }), _jsxs("div", { className: "mt-6 space-y-3 sm:hidden", children: [view.pageRows.map((property) => {
+                                const companies = companiesByPropertyId.get(property.id) ?? [];
+                                const propertyTotals = totals[property.id] ?? { bookedAmount: 0, invoiceCount: 0 };
+                                return (_jsxs("div", { className: "cursor-pointer rounded-xl border border-border bg-card p-4", onClick: () => adapter.openProperty(property.code), children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "font-medium text-foreground", children: [_jsx("span", { className: "font-mono", children: property.code }), property.name ? (_jsx("span", { className: "ml-2 font-sans", children: property.name })) : null] }), property.address ? (_jsx("div", { className: "text-xs text-muted-foreground", children: property.address })) : null] }), _jsxs("div", { className: "shrink-0 text-right tabular-nums", children: [_jsx("div", { className: "font-medium text-foreground", children: formatters.formatMoney(propertyTotals.bookedAmount) }), _jsx("div", { className: "text-xs text-muted-foreground", children: labels.list.invoiceCount(propertyTotals.invoiceCount) })] })] }), _jsx("div", { className: "mt-2 flex flex-wrap gap-1", children: companies.length ? (companies.map((company) => (_jsx(CompanyChip, { code: company.code, labels: labels.companyChip }, company.code)))) : (_jsx(CompanyChip, { code: null, labels: labels.companyChip })) }), _jsxs("div", { className: "mt-3 flex flex-wrap items-center justify-between gap-x-3 gap-y-1 border-t border-border pt-2 text-xs text-muted-foreground", children: [_jsxs("span", { children: [labels.list.columns.createdAt, ": ", formatters.formatDate(property.createdAt)] }), _jsxs("span", { children: [labels.list.columns.updatedAt, ":", " ", formatters.formatDate(property.updatedAt ?? property.createdAt)] })] })] }, property.id));
+                            }), 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 }))] })] })), !propertiesQuery.isError && !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 NewPropertyDialog({ adapter, labels, initialCode, onInitialCodeConsumed, }) {
+    const createLabels = labels.list.create;
+    const [open, setOpen] = useState(false);
+    const [code, setCode] = useState("");
+    const [name, setName] = useState("");
+    const [address, setAddress] = useState("");
+    const [vatStatus, setVatStatus] = useState(NONE);
+    const [companyIds, setCompanyIds] = useState([]);
+    const [companyError, setCompanyError] = useState(false);
+    const [codeError, setCodeError] = useState("");
+    const [isSaving, setIsSaving] = useState(false);
+    const companiesQuery = adapter.useCompanies();
+    // The list behind this dialog is already loaded, so the duplicate check costs no extra request.
+    const propertiesQuery = adapter.useProperties();
+    const takenCodes = useMemo(() => new Set((propertiesQuery.data ?? []).map((property) => property.code.toLowerCase())), [propertiesQuery.data]);
+    // Deep link: open pre-filled with the code, then tell the host so it does not reopen.
+    useEffect(() => {
+        if (initialCode) {
+            setCode(initialCode);
+            setOpen(true);
+            onInitialCodeConsumed?.();
+        }
+    }, [initialCode, onInitialCodeConsumed]);
+    function reset() {
+        setCode("");
+        setName("");
+        setAddress("");
+        setVatStatus(NONE);
+        setCompanyIds([]);
+        setCompanyError(false);
+        setCodeError("");
+    }
+    function validateCode(value) {
+        if (!value)
+            return createLabels.codeRequired;
+        if (value.length > 32)
+            return createLabels.codeTooLong;
+        if (takenCodes.has(value.toLowerCase()))
+            return createLabels.codeTaken;
+        return "";
+    }
+    async function create() {
+        // Point at the offending fields instead of a vanishing toast; report both problems at once.
+        const trimmedCode = code.trim();
+        const codeProblem = validateCode(trimmedCode);
+        const missingCompany = companyIds.length === 0;
+        if (codeProblem || missingCompany) {
+            setCodeError(codeProblem);
+            setCompanyError(missingCompany);
+            return;
+        }
+        setCodeError("");
+        // Sequential and reported separately: if creation succeeds but linking companies fails,
+        // the property already exists, so that reads as "created, but needs a company".
+        let created = null;
+        setIsSaving(true);
+        try {
+            created = await adapter.createProperty({
+                code: trimmedCode,
+                name: name.trim() || null,
+                address: address.trim() || null,
+                vatStatus: vatStatus === NONE ? null : vatStatus,
+            });
+            await adapter.setPropertyCompanies({ propertyId: created.id, companyIds });
+            toast.success(createLabels.created);
+            reset();
+            setOpen(false);
+        }
+        catch (error) {
+            const message = readableErrorMessage(error, "");
+            if (created) {
+                toast.error(createLabels.createdWithoutCompany(created.code, message));
+                reset();
+                setOpen(false);
+            }
+            else {
+                toast.error(createLabels.createFailed(message));
+            }
+        }
+        finally {
+            setIsSaving(false);
+        }
+    }
+    return (_jsxs(Dialog, { open: open, onOpenChange: (nextOpen) => {
+            setOpen(nextOpen);
+            // A dialog reopened after a failed attempt should not still show the old message.
+            if (nextOpen) {
+                setCodeError("");
+                setCompanyError(false);
+            }
+        }, children: [_jsx(DialogTrigger, { asChild: true, children: _jsxs(Button, { className: "gap-2", children: [_jsx(Plus, { className: "size-4" }), " ", createLabels.button] }) }), _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: createLabels.title }), _jsx(DialogDescription, { children: createLabels.description })] }), _jsxs("div", { className: "grid gap-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { className: "text-xs text-muted-foreground", children: [createLabels.codeLabel, " ", _jsx(RequiredMark, { title: labels.requiredFieldTitle })] }), _jsx(Input, { value: code, onChange: (event) => {
+                                            setCode(event.target.value);
+                                            setCodeError("");
+                                        }, placeholder: createLabels.codePlaceholder, "aria-invalid": !!codeError }), _jsx(FieldErrorText, { text: codeError })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: createLabels.nameLabel }), _jsx(Input, { value: name, onChange: (event) => setName(event.target.value), placeholder: createLabels.namePlaceholder })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: createLabels.addressLabel }), _jsx(Input, { value: address, onChange: (event) => setAddress(event.target.value), placeholder: createLabels.addressPlaceholder })] }), _jsx(CompanyAssignmentField, { values: companyIds, onValuesChange: (ids) => {
+                                    setCompanyError(false);
+                                    setCompanyIds(ids);
+                                }, 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: createLabels.vatStatusLabel }), _jsx(Combobox, { value: vatStatus, onValueChange: setVatStatus, 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: () => setOpen(false), children: createLabels.cancel }), _jsx(Button, { onClick: () => void create(), disabled: isSaving, children: isSaving ? createLabels.submitting : createLabels.submit })] })] })] }));
+}

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

@@ -0,0 +1,14 @@
+import type { SortDirection } from "./use-table-view";
+import type { PropertiesLabels } from "./labels";
+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: PropertiesLabels["sort"];
+}): import("react").JSX.Element;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Combobox } from "../../ui/combobox.js";
+// One field picker plus an asc/desc picker; table headers stay static.
+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.label }), _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.ascending },
+                    { value: "desc", label: labels.descending },
+                ] })] }));
+}

package/dist/pages/properties/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/properties/use-infinite-rows.js

@@ -0,0 +1,26 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+// Reveals a long list a 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;
+    // A callback ref because the sentinel 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));
+            }
+        }, 
+        // Start the next page slightly before the sentinel is on screen.
+        { 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/properties/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/properties/use-table-view.js

@@ -0,0 +1,56 @@
+import { useMemo, useState } from "react";
+// Client-side sort + pagination for small master-data lists.
+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);
+    // Return to the first page when the upstream filter changes (adjust state during render).
+    const [seenResetKey, setSeenResetKey] = useState(resetKey);
+    if (resetKey !== seenResetKey) {
+        setSeenResetKey(resetKey);
+        setPage(1);
+    }
+    const sorted = useMemo(() => {
+        const copy = [...rows];
+        copy.sort((left, right) => {
+            const leftValue = sortValue(left, sort);
+            const rightValue = sortValue(right, sort);
+            const comparison = typeof leftValue === "number" && typeof rightValue === "number"
+                ? leftValue - rightValue
+                : String(leftValue).localeCompare(String(rightValue));
+            return direction === "asc" ? comparison : -comparison;
+        });
+        return copy;
+    }, [rows, sort, direction, sortValue]);
+    const total = sorted.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 = sorted.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/supplier-detail/SupplierDetailPage.d.ts

@@ -0,0 +1,10 @@
+import { type Formatters } from "../../lib/formatters";
+import type { SupplierDetailAdapter } from "../../adapters/supplier-detail";
+import { type SupplierDetailLabels } from "./labels";
+export interface SupplierDetailPageProps {
+    supplierId: string;
+    adapter: SupplierDetailAdapter;
+    labels?: SupplierDetailLabels;
+    formatters?: Formatters;
+}
+export declare function SupplierDetailPage({ supplierId, adapter, labels, formatters, }: SupplierDetailPageProps): import("react").JSX.Element;

package/dist/pages/supplier-detail/SupplierDetailPage.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { ArrowLeft, Check, Copy, Landmark, MoreVertical, RotateCcw, Star, 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 { Skeleton } from "../../ui/skeleton.js";
+import { Badge } from "../../ui/badge.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "../../ui/dialog.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "../../ui/dropdown-menu.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 { englishSupplierDetailLabels } from "./labels.js";
+function formFrom(supplier) {
+    const s = (v) => v ?? "";
+    return {
+        name: s(supplier.name),
+        vat_id: s(supplier.vat_id),
+        address: s(supplier.address),
+        phone: s(supplier.phone),
+        email: s(supplier.email),
+        contact_person: s(supplier.contact_person),
+    };
+}
+function formatIban(iban) {
+    return iban.replace(/(.{4})/g, "$1 ").trim();
+}
+export function SupplierDetailPage({ supplierId, adapter, labels = englishSupplierDetailLabels, formatters = englishFormatters, }) {
+    const supplierQuery = adapter.useSupplier(supplierId);
+    const invoicesQuery = adapter.useInvoices(supplierId);
+    const accountsQuery = adapter.bankAccounts?.useAccounts(supplierId);
+    const [editOpen, setEditOpen] = useState(false);
+    const [form, setForm] = useState(null);
+    const [isSaving, setIsSaving] = useState(false);
+    const [deleteOpen, setDeleteOpen] = useState(false);
+    const [deleteReason, setDeleteReason] = useState("");
+    const [addAccountOpen, setAddAccountOpen] = useState(false);
+    const [newAccount, setNewAccount] = useState({ iban: "", bic: "", bankName: "" });
+    const supplier = supplierQuery.data;
+    const invoices = useMemo(() => (invoicesQuery.data ?? []).slice().sort((a, b) => (b.documentDate ?? "").localeCompare(a.documentDate ?? "")), [invoicesQuery.data]);
+    if (supplierQuery.error) {
+        return _jsx(ErrorState, { error: supplierQuery.error, onRetry: () => supplierQuery.refetch() });
+    }
+    if (supplierQuery.loading) {
+        return (_jsxs("div", { className: "space-y-6", children: [_jsx(Skeleton, { className: "h-8 w-64" }), _jsxs("div", { className: "grid gap-6 lg:grid-cols-2", children: [_jsx(Skeleton, { className: "h-64 rounded-xl" }), _jsx(Skeleton, { className: "h-64 rounded-xl" })] })] }));
+    }
+    if (!supplier) {
+        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.notFoundTitle }), _jsx("p", { className: "mt-2 text-base text-muted-foreground", children: labels.notFoundBody(supplierId) }), _jsx(Button, { className: "mt-6", onClick: adapter.openSupplierList, children: labels.backToList })] }));
+    }
+    function openEdit() {
+        setForm(formFrom(supplier));
+        setEditOpen(true);
+    }
+    async function save() {
+        if (!form)
+            return;
+        const changes = {};
+        const s = (v) => (v.trim() === "" ? null : v.trim());
+        Object.keys(form).forEach((key) => {
+            const next = s(form[key]);
+            const prev = supplier[key] ?? null;
+            if (next !== prev)
+                changes[key] = next;
+        });
+        if (Object.keys(changes).length === 0) {
+            setEditOpen(false);
+            return;
+        }
+        setIsSaving(true);
+        try {
+            await adapter.updateSupplier(supplier.id, changes);
+            toast.success(labels.saved);
+            setEditOpen(false);
+        }
+        catch (error) {
+            toast.error(labels.saveFailed(readableErrorMessage(error, "")));
+        }
+        finally {
+            setIsSaving(false);
+        }
+    }
+    async function confirmDelete() {
+        try {
+            await adapter.softDelete(supplier.id, deleteReason.trim());
+            toast.success(labels.deletedToast);
+            setDeleteOpen(false);
+            adapter.openSupplierList();
+        }
+        catch (error) {
+            toast.error(readableErrorMessage(error, ""));
+        }
+    }
+    async function restore() {
+        try {
+            await adapter.restore(supplier.id);
+            toast.success(labels.restoredToast);
+        }
+        catch (error) {
+            toast.error(readableErrorMessage(error, ""));
+        }
+    }
+    async function addAccount() {
+        if (!adapter.bankAccounts || !newAccount.iban.trim())
+            return;
+        try {
+            await adapter.bankAccounts.addAccount(supplier.id, newAccount);
+            toast.success(labels.accountAdded);
+            setNewAccount({ iban: "", bic: "", bankName: "" });
+            setAddAccountOpen(false);
+        }
+        catch (error) {
+            toast.error(readableErrorMessage(error, ""));
+        }
+    }
+    async function removeAccount(accountId) {
+        if (!adapter.bankAccounts)
+            return;
+        try {
+            await adapter.bankAccounts.deleteAccount(accountId);
+            toast.success(labels.accountRemoved);
+        }
+        catch (error) {
+            toast.error(readableErrorMessage(error, ""));
+        }
+    }
+    async function setDefaultAccount(accountId) {
+        if (!adapter.bankAccounts)
+            return;
+        try {
+            await adapter.bankAccounts.setDefault(supplier.id, accountId);
+        }
+        catch (error) {
+            toast.error(readableErrorMessage(error, ""));
+        }
+    }
+    async function copyAccount(iban, bic, bankName) {
+        const text = [formatIban(iban), bic, bankName].filter(Boolean).join("\n");
+        try {
+            await navigator.clipboard.writeText(text);
+            toast.success(labels.copiedToast);
+        }
+        catch {
+            return;
+        }
+    }
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs(Button, { variant: "ghost", size: "sm", className: "-ml-2 gap-1.5 text-muted-foreground", onClick: adapter.openSupplierList, children: [_jsx(ArrowLeft, { className: "size-4" }), labels.backToList] }), _jsx("h1", { className: "mt-2 truncate text-2xl font-semibold tracking-tight text-foreground", children: supplier.name }), supplier.vat_id && _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: supplier.vat_id })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [adapter.canEdit && (_jsx(Button, { variant: "outline", size: "sm", onClick: openEdit, children: labels.edit })), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", children: _jsx(MoreVertical, { className: "size-4" }) }) }), _jsx(DropdownMenuContent, { align: "end", children: supplier.deleted_at ? (_jsxs(DropdownMenuItem, { onClick: restore, children: [_jsx(RotateCcw, { className: "size-4" }), labels.restoreButton] })) : (_jsxs(DropdownMenuItem, { onClick: () => setDeleteOpen(true), className: "text-destructive", children: [_jsx(Trash2, { className: "size-4" }), labels.deleteButton] })) })] })] })] }), supplier.deleted_at && (_jsx("div", { className: "rounded-xl border border-border bg-muted/40 px-4 py-3 text-sm text-muted-foreground", children: labels.deletedBanner(formatters.formatDate(supplier.deleted_at)) })), _jsxs("div", { className: "grid gap-6 lg:grid-cols-2", children: [_jsxs("div", { className: "rounded-xl border border-border bg-card p-4", children: [_jsx("h2", { className: "text-base font-semibold text-foreground", children: labels.fieldName }), _jsxs("dl", { className: "mt-3 space-y-3 text-sm", children: [_jsx(Row, { label: labels.fieldAddress, value: supplier.address }), _jsx(Row, { label: labels.fieldVatId, value: supplier.vat_id }), _jsx(Row, { label: labels.fieldPhone, value: supplier.phone }), _jsx(Row, { label: labels.fieldEmail, value: supplier.email }), _jsx(Row, { label: labels.fieldContactPerson, value: supplier.contact_person })] })] }), adapter.bankAccounts && (_jsxs("div", { className: "rounded-xl border border-border bg-card p-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "text-base font-semibold text-foreground", children: labels.bankAccountsTitle }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => setAddAccountOpen(true), children: labels.addAccount })] }), accountsQuery?.loading ? (_jsxs("div", { className: "mt-3 space-y-2", children: [_jsx(Skeleton, { className: "h-14 w-full rounded-lg" }), _jsx(Skeleton, { className: "h-14 w-full rounded-lg" })] })) : (accountsQuery?.data ?? []).length === 0 ? (_jsx("p", { className: "mt-3 text-sm text-muted-foreground", children: labels.bankAccountsEmpty })) : (_jsx("ul", { className: "mt-3 space-y-2", children: (accountsQuery?.data ?? []).map((account) => (_jsx("li", { className: "rounded-lg border border-border p-3", children: _jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex items-center gap-1.5 font-mono text-sm text-foreground", children: [_jsx(Landmark, { className: "size-3.5 shrink-0 text-muted-foreground" }), formatIban(account.iban), account.is_default && (_jsxs(Badge, { variant: "secondary", className: "gap-1", children: [_jsx(Star, { className: "size-3" }), labels.defaultBadge] }))] }), (account.bic || account.bank_name) && (_jsx("div", { className: "mt-0.5 text-xs text-muted-foreground", children: [account.bic, account.bank_name].filter(Boolean).join(" · ") }))] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [_jsx("button", { type: "button", title: labels.copyAccount, className: "flex size-7 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground", onClick: () => copyAccount(account.iban, account.bic, account.bank_name), children: _jsx(Copy, { className: "size-3.5" }) }), !account.is_default && (_jsx("button", { type: "button", title: labels.setDefault, className: "flex size-7 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground", onClick: () => setDefaultAccount(account.id), children: _jsx(Check, { className: "size-3.5" }) })), _jsx("button", { type: "button", title: labels.removeAccount, className: "flex size-7 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive", onClick: () => removeAccount(account.id), children: _jsx(Trash2, { className: "size-3.5" }) })] })] }) }, account.id))) }))] }))] }), _jsxs("div", { className: "rounded-xl border border-border bg-card p-4", children: [_jsx("h2", { className: "text-base font-semibold text-foreground", children: labels.invoicesTitle }), invoicesQuery.loading ? (_jsx(Skeleton, { className: "mt-3 h-32 w-full rounded-lg" })) : invoices.length === 0 ? (_jsx("p", { className: "mt-3 text-sm text-muted-foreground", children: labels.invoicesEmpty })) : (_jsx("div", { className: "mt-3 overflow-hidden overflow-x-auto rounded-lg border border-border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { className: "bg-muted/40", children: [_jsx(TableHead, { children: labels.invoicesTitle }), _jsx(TableHead, { className: "text-right", children: labels.fieldName })] }) }), _jsx(TableBody, { children: invoices.map((invoice) => (_jsxs(TableRow, { className: "cursor-pointer", onClick: () => adapter.openInvoice(invoice.id), children: [_jsxs(TableCell, { children: [_jsx("div", { className: "text-sm text-foreground", children: invoice.invoiceNumber ? labels.invoiceNumber(invoice.invoiceNumber) : labels.noInvoiceNumber }), _jsx("div", { className: "text-xs text-muted-foreground", children: formatters.formatDate(invoice.documentDate) })] }), _jsx(TableCell, { className: cn("text-right font-medium tabular-nums", invoice.paidAt ? "text-foreground" : "text-muted-foreground"), children: formatters.formatMoney(invoice.amountGross) })] }, invoice.id))) })] }) }))] }), _jsx(Dialog, { open: editOpen, onOpenChange: setEditOpen, children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: labels.edit }) }), form && (_jsxs("div", { className: "grid gap-3", children: [_jsx(TextField, { label: labels.fieldName, value: form.name, onChange: (v) => setForm({ ...form, name: v }) }), _jsx(TextField, { label: labels.fieldVatId, value: form.vat_id, onChange: (v) => setForm({ ...form, vat_id: v }) }), _jsx(TextField, { label: labels.fieldAddress, value: form.address, onChange: (v) => setForm({ ...form, address: v }) }), _jsx(TextField, { label: labels.fieldPhone, value: form.phone, onChange: (v) => setForm({ ...form, phone: v }) }), _jsx(TextField, { label: labels.fieldEmail, value: form.email, onChange: (v) => setForm({ ...form, email: v }) }), _jsx(TextField, { label: labels.fieldContactPerson, value: form.contact_person, onChange: (v) => setForm({ ...form, contact_person: v }) })] })), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => setEditOpen(false), children: labels.cancel }), _jsx(Button, { onClick: save, disabled: isSaving, children: isSaving ? labels.saving : labels.save })] })] }) }), _jsx(Dialog, { open: addAccountOpen, onOpenChange: setAddAccountOpen, children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: labels.addAccountTitle }) }), _jsxs("div", { className: "grid gap-3", children: [_jsx(TextField, { label: labels.ibanField, value: newAccount.iban, onChange: (v) => setNewAccount({ ...newAccount, iban: v }) }), _jsx(TextField, { label: labels.bicField, value: newAccount.bic, onChange: (v) => setNewAccount({ ...newAccount, bic: v }) }), _jsx(TextField, { label: labels.bankNameField, value: newAccount.bankName, onChange: (v) => setNewAccount({ ...newAccount, bankName: v }) })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => setAddAccountOpen(false), children: labels.cancel }), _jsx(Button, { onClick: addAccount, disabled: !newAccount.iban.trim(), children: labels.addAccountConfirm })] })] }) }), _jsx(Dialog, { open: deleteOpen, onOpenChange: setDeleteOpen, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: labels.deleteDialogTitle }), _jsx(DialogDescription, { children: labels.deleteDialogDescription })] }), _jsx(Textarea, { value: deleteReason, onChange: (event) => setDeleteReason(event.target.value), placeholder: labels.deleteReasonPlaceholder, rows: 2 }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => setDeleteOpen(false), children: labels.cancel }), _jsx(Button, { variant: "destructive", onClick: confirmDelete, children: labels.deleteConfirm })] })] }) })] }));
+}
+function Row({ label, value }) {
+    return (_jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsx("dt", { className: "text-muted-foreground", children: label }), _jsx("dd", { className: cn("text-right text-foreground", !value && "text-muted-foreground"), children: value ?? "—" })] }));
+}
+function TextField({ label, value, onChange, }) {
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: label }), _jsx(Input, { value: value, onChange: (event) => onChange(event.target.value) })] }));
+}

package/dist/pages/supplier-detail/index.d.ts

@@ -0,0 +1,4 @@
+export { SupplierDetailPage } from "./SupplierDetailPage";
+export type { SupplierDetailPageProps } from "./SupplierDetailPage";
+export { englishSupplierDetailLabels } from "./labels";
+export type { SupplierDetailLabels } from "./labels";

package/dist/pages/supplier-detail/index.js

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

package/dist/pages/supplier-detail/labels.d.ts

@@ -0,0 +1,46 @@
+export interface SupplierDetailLabels {
+    backToList: string;
+    notFoundTitle: string;
+    notFoundBody: (id: string) => string;
+    deletedBanner: (date: string) => string;
+    edit: string;
+    save: string;
+    cancel: string;
+    saving: string;
+    saved: string;
+    saveFailed: (error: string) => string;
+    fieldName: string;
+    fieldVatId: string;
+    fieldAddress: string;
+    fieldPhone: string;
+    fieldEmail: string;
+    fieldContactPerson: string;
+    deleteButton: string;
+    deleteDialogTitle: string;
+    deleteDialogDescription: string;
+    deleteReasonPlaceholder: string;
+    deleteConfirm: string;
+    deletedToast: string;
+    restoreButton: string;
+    restoredToast: string;
+    bankAccountsTitle: string;
+    bankAccountsEmpty: string;
+    addAccount: string;
+    addAccountTitle: string;
+    ibanField: string;
+    bicField: string;
+    bankNameField: string;
+    addAccountConfirm: string;
+    accountAdded: string;
+    removeAccount: string;
+    accountRemoved: string;
+    setDefault: string;
+    defaultBadge: string;
+    copyAccount: string;
+    copiedToast: string;
+    invoicesTitle: string;
+    invoicesEmpty: string;
+    invoiceNumber: (nr: string) => string;
+    noInvoiceNumber: string;
+}
+export declare const englishSupplierDetailLabels: SupplierDetailLabels;

package/dist/pages/supplier-detail/labels.js

@@ -0,0 +1,45 @@
+export const englishSupplierDetailLabels = {
+    backToList: "Back to suppliers",
+    notFoundTitle: "Supplier not found",
+    notFoundBody: (id) => `No supplier matches "${id}".`,
+    deletedBanner: (date) => `Deleted on ${date}.`,
+    edit: "Edit",
+    save: "Save",
+    cancel: "Cancel",
+    saving: "Saving…",
+    saved: "Saved.",
+    saveFailed: (error) => `Save failed: ${error}`,
+    fieldName: "Name",
+    fieldVatId: "VAT ID",
+    fieldAddress: "Address",
+    fieldPhone: "Phone",
+    fieldEmail: "Email",
+    fieldContactPerson: "Contact person",
+    deleteButton: "Delete",
+    deleteDialogTitle: "Delete this supplier?",
+    deleteDialogDescription: "This moves the supplier to trash. It can be restored later.",
+    deleteReasonPlaceholder: "Reason (optional)",
+    deleteConfirm: "Delete",
+    deletedToast: "Supplier deleted.",
+    restoreButton: "Restore",
+    restoredToast: "Supplier restored.",
+    bankAccountsTitle: "Bank accounts",
+    bankAccountsEmpty: "No bank accounts on file.",
+    addAccount: "Add account",
+    addAccountTitle: "Add a bank account",
+    ibanField: "IBAN",
+    bicField: "BIC",
+    bankNameField: "Bank name",
+    addAccountConfirm: "Add",
+    accountAdded: "Account added.",
+    removeAccount: "Remove",
+    accountRemoved: "Account removed.",
+    setDefault: "Set as default",
+    defaultBadge: "Default",
+    copyAccount: "Copy account details",
+    copiedToast: "Copied.",
+    invoicesTitle: "Invoices",
+    invoicesEmpty: "No invoices from this supplier yet.",
+    invoiceNumber: (nr) => `No. ${nr}`,
+    noInvoiceNumber: "No invoice number",
+};