@hub-kit/core 0.3.0

package/dist/pages/customers/customer-detail-page.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { ArrowLeft, Pencil, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "../../ui/button.js";
+import { Input } from "../../ui/input.js";
+import { Skeleton } from "../../ui/skeleton.js";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "../../ui/alert-dialog.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "../../ui/table.js";
+import { ErrorState, readableErrorMessage } from "../../components/feedback/query-states.js";
+import { englishFormatters } from "../../lib/formatters.js";
+import { CopyButton } from "./copy-button.js";
+import { EditCustomerDialog } from "./edit-customer-dialog.js";
+import { countsAsRevenue, InvoiceStatusBadge } from "./invoice-status-badge.js";
+import { englishCustomersLabels } from "./labels.js";
+export function CustomerDetailPage({ adapter, customerId, labels = englishCustomersLabels, formatters = englishFormatters, }) {
+    const customerQuery = adapter.useCustomer(customerId);
+    const invoicesQuery = adapter.useCustomerInvoices(customerId);
+    const companiesQuery = adapter.useCompanies();
+    const customer = customerQuery.data ?? null;
+    const [deleteReason, setDeleteReason] = useState("");
+    const [isDeleting, setIsDeleting] = useState(false);
+    const [editOpen, setEditOpen] = useState(false);
+    const company = useMemo(() => (companiesQuery.data ?? []).find((c) => c.id === customer?.companyId) ?? null, [companiesQuery.data, customer]);
+    const invoices = invoicesQuery.data ?? [];
+    // Every invoice stays in the table, but the headline sum only counts real revenue.
+    const countedInvoices = invoices.filter((invoice) => countsAsRevenue(invoice.status));
+    const totalAmount = countedInvoices.reduce((sum, invoice) => sum + (invoice.amountGross ?? 0), 0);
+    const notCountedCount = invoices.length - countedInvoices.length;
+    if (customerQuery.isLoading) {
+        return (_jsxs("div", { className: "space-y-6", children: [_jsx(Skeleton, { className: "h-8 w-64" }), _jsx(Skeleton, { className: "h-64 w-full rounded-xl" })] }));
+    }
+    if (customerQuery.isError) {
+        return _jsx(ErrorState, { error: customerQuery.error, onRetry: customerQuery.refetch });
+    }
+    if (!customer) {
+        return (_jsxs("div", { className: "mx-auto max-w-md py-20 text-center", children: [_jsx("h1", { className: "text-xl font-semibold tracking-tight text-foreground", children: labels.detail.notFoundTitle }), _jsx(Button, { className: "mt-6", onClick: () => adapter.openCustomerList(), children: labels.detail.toList })] }));
+    }
+    async function deleteCustomer() {
+        setIsDeleting(true);
+        try {
+            await adapter.deleteCustomer(customerId, deleteReason.trim());
+            toast.success(labels.detail.deleteDialog.deleted);
+            adapter.openCustomerList();
+        }
+        catch (error) {
+            toast.error(labels.detail.deleteDialog.failed(readableErrorMessage(error, "")));
+        }
+        finally {
+            setIsDeleting(false);
+        }
+    }
+    const readFields = [
+        { label: labels.fields.name, value: customer.name },
+        { label: labels.fields.company, value: company?.code ?? "—" },
+        { label: labels.fields.contactPerson, value: customer.contactPerson ?? "—" },
+        {
+            label: labels.fields.address,
+            value: [
+                customer.addressStreet,
+                [customer.addressZip, customer.addressCity].filter(Boolean).join(" "),
+            ]
+                .filter(Boolean)
+                .join(", ") || "—",
+        },
+        {
+            label: labels.fields.vatId,
+            value: customer.vatId ?? "—",
+            copyValue: customer.vatId ?? undefined,
+        },
+        {
+            label: labels.fields.phone,
+            value: customer.phone ?? "—",
+            copyValue: customer.phone ?? undefined,
+        },
+        {
+            label: labels.fields.email,
+            value: customer.email ?? "—",
+            copyValue: customer.email ?? undefined,
+        },
+    ];
+    return (_jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => adapter.openCustomerList(), className: "inline-flex cursor-pointer items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground", children: [_jsx(ArrowLeft, { className: "size-4" }), " ", labels.detail.back] }), _jsxs("div", { className: "mt-2 flex flex-wrap items-end justify-between gap-4", children: [_jsx("h1", { className: "text-2xl font-semibold tracking-tight text-foreground", children: customer.name }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Button, { variant: "outline", className: "gap-2", onClick: () => setEditOpen(true), children: [_jsx(Pencil, { className: "size-4" }), " ", labels.detail.editButton] }), _jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", className: "gap-2 text-destructive hover:bg-destructive/10 hover:text-destructive", children: [_jsx(Trash2, { className: "size-4" }), " ", labels.detail.deleteButton] }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: labels.detail.deleteDialog.title }), _jsx(AlertDialogDescription, { children: labels.detail.deleteDialog.description })] }), _jsx(Input, { value: deleteReason, onChange: (event) => setDeleteReason(event.target.value), placeholder: labels.detail.deleteDialog.reasonPlaceholder }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: labels.detail.deleteDialog.cancel }), _jsx(AlertDialogAction, { disabled: !deleteReason.trim() || isDeleting, onClick: deleteCustomer, className: "bg-destructive text-destructive-foreground hover:bg-destructive/90", children: labels.detail.deleteDialog.confirm })] })] })] })] })] }), _jsx(EditCustomerDialog, { open: editOpen, onOpenChange: setEditOpen, customer: customer, adapter: adapter, labels: labels }), _jsxs("div", { className: "mt-6 grid gap-6 lg:grid-cols-[1fr_1.1fr]", children: [_jsxs("section", { className: "rounded-xl border border-border bg-card p-5", children: [_jsx("h2", { className: "mb-4 text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: labels.detail.masterDataSection }), _jsx("p", { className: "mb-4 text-xs text-muted-foreground", children: labels.detail.masterDataHint }), _jsx("dl", { className: "space-y-3", children: readFields.map((field) => (_jsxs("div", { className: "flex items-start justify-between gap-2 border-b border-border/60 pb-3 last:border-0 last:pb-0", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("dt", { className: "text-xs text-muted-foreground", children: field.label }), _jsx("dd", { className: "text-sm text-foreground", children: field.value })] }), field.copyValue ? (_jsx(CopyButton, { value: field.copyValue, fieldLabel: field.label, labels: labels.copy })) : null] }, field.label))) })] }), _jsxs("section", { className: "rounded-xl border border-border bg-card p-5", children: [_jsx("h2", { className: "mb-4 text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: labels.detail.invoicesSection }), _jsxs("div", { className: "mb-4 rounded-lg bg-muted/40 px-3 py-2", children: [_jsx("div", { className: "text-xs text-muted-foreground", children: labels.detail.invoiceTotal(countedInvoices.length) }), _jsx("div", { className: "text-lg font-semibold tabular-nums text-foreground", children: formatters.formatMoney(totalAmount) }), notCountedCount > 0 && (_jsx("div", { className: "mt-0.5 text-xs text-muted-foreground", children: labels.detail.notCounted(notCountedCount) }))] }), _jsx("div", { className: "overflow-hidden rounded-lg border border-border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { className: "bg-muted/40", children: [_jsx(TableHead, { children: labels.detail.invoiceColumns.number }), _jsx(TableHead, { children: labels.detail.invoiceColumns.date }), _jsx(TableHead, { className: "text-right", children: labels.detail.invoiceColumns.amount }), _jsx(TableHead, { children: labels.detail.invoiceColumns.status })] }) }), _jsxs(TableBody, { children: [invoices.map((invoice) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium text-foreground", children: invoice.invoiceNumber ?? labels.detail.draftNumber }), _jsx(TableCell, { className: "text-sm text-muted-foreground tabular-nums", children: formatters.formatDate(invoice.invoiceDate) }), _jsx(TableCell, { className: "text-right font-medium tabular-nums", children: formatters.formatMoney(invoice.amountGross ?? 0) }), _jsx(TableCell, { children: _jsx(InvoiceStatusBadge, { status: invoice.status, dueDate: invoice.dueDate, labels: labels.detail.invoiceStatus }) })] }, invoice.id))), invoices.length === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 4, className: "py-8 text-center text-muted-foreground", children: labels.detail.invoicesEmpty }) }))] })] }) })] })] })] }));
+}

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

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

package/dist/pages/customers/customer-list-page.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Search } from "lucide-react";
+import { Input } from "../../ui/input.js";
+import { Skeleton } from "../../ui/skeleton.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "../../ui/table.js";
+import { ErrorState, TableSkeleton } from "../../components/feedback/query-states.js";
+import { TablePagination } from "../../components/feedback/table-pagination.js";
+import { englishFormatters } from "../../lib/formatters.js";
+import { CompanyChip } from "./company-chip.js";
+import { NewCustomerDialog } from "./new-customer-dialog.js";
+import { SortControl } from "./sort-control.js";
+import { useTableView } from "./use-table-view.js";
+import { englishCustomersLabels } from "./labels.js";
+const NO_TOTALS = { invoiceCount: 0, totalAmount: 0, overdueCount: 0 };
+export function CustomerListPage({ adapter, labels = englishCustomersLabels, formatters = englishFormatters, }) {
+    const [searchInput, setSearchInput] = useState("");
+    const customersQuery = adapter.useCustomers();
+    const totalsQuery = adapter.useInvoiceTotalsByCustomer();
+    const companiesQuery = adapter.useCompanies();
+    const companyById = useMemo(() => new Map((companiesQuery.data ?? []).map((c) => [c.id, c])), [companiesQuery.data]);
+    // Totals load separately from the list, so they keep their own skeletons: a fabricated 0.00 reads as fact.
+    const totalsReady = totalsQuery.data !== undefined;
+    const totals = totalsQuery.data ?? {};
+    // Search covers every column the table shows: name, email and company code.
+    const filteredCustomers = useMemo(() => {
+        const term = searchInput.trim().toLowerCase();
+        if (!term)
+            return customersQuery.data ?? [];
+        return (customersQuery.data ?? []).filter((customer) => [customer.name, customer.email, companyById.get(customer.companyId)?.code]
+            .filter(Boolean)
+            .some((field) => String(field).toLowerCase().includes(term)));
+    }, [customersQuery.data, searchInput, companyById]);
+    const view = useTableView(filteredCustomers, {
+        initialSort: "name",
+        initialDirection: "asc",
+        resetKey: searchInput,
+        sortValue: (customer, key) => {
+            const customerTotals = totals[customer.id] ?? NO_TOTALS;
+            switch (key) {
+                case "company":
+                    return companyById.get(customer.companyId)?.code ?? "";
+                case "totalAmount":
+                    return customerTotals.totalAmount;
+                case "invoiceCount":
+                    return customerTotals.invoiceCount;
+                default:
+                    return customer.name ?? "";
+            }
+        },
+    });
+    const sortColumns = [
+        { value: "name", label: labels.list.columns.name },
+        { value: "company", label: labels.list.columns.company },
+        { value: "invoiceCount", label: labels.list.columns.invoices },
+        { value: "totalAmount", label: labels.list.columns.amount },
+    ];
+    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(NewCustomerDialog, { 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: 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 })] }), customersQuery.isError ? (_jsx("div", { className: "mt-4", children: _jsx(ErrorState, { error: customersQuery.error, onRetry: customersQuery.refetch }) })) : customersQuery.isLoading ? (_jsx("div", { className: "mt-4", children: _jsx(TableSkeleton, { rows: 8, columns: 5 }) })) : (_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, { className: "min-w-[200px]", children: labels.list.columns.name }), _jsx(TableHead, { children: labels.list.columns.company }), _jsx(TableHead, { children: labels.list.columns.email }), _jsx(TableHead, { className: "text-right", children: labels.list.columns.invoices }), _jsx(TableHead, { className: "text-right", children: labels.list.columns.amount }), _jsx(TableHead, { className: "text-right", children: labels.list.columns.overdue })] }) }), _jsxs(TableBody, { children: [view.pageRows.map((customer) => {
+                                            const customerTotals = totals[customer.id] ?? NO_TOTALS;
+                                            return (_jsxs(TableRow, { className: "cursor-pointer", onClick: () => adapter.openCustomer(customer.id), children: [_jsx(TableCell, { className: "min-w-[200px] font-medium text-foreground", children: customer.name }), _jsx(TableCell, { children: _jsx(CompanyChip, { code: companyById.get(customer.companyId)?.code ?? null, labels: labels.companyChip }) }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: customer.email ?? "—" }), _jsx(TableCell, { className: "text-right tabular-nums", children: totalsReady ? (customerTotals.invoiceCount) : (_jsx(Skeleton, { className: "ml-auto h-4 w-8" })) }), _jsx(TableCell, { className: "text-right font-medium tabular-nums", children: totalsReady ? (formatters.formatMoney(customerTotals.totalAmount)) : (_jsx(Skeleton, { className: "ml-auto h-4 w-24" })) }), _jsx(TableCell, { className: "text-right tabular-nums", children: !totalsReady ? (_jsx(Skeleton, { className: "ml-auto h-4 w-8" })) : customerTotals.overdueCount > 0 ? (_jsx("span", { className: "text-destructive", children: customerTotals.overdueCount })) : ("—") })] }, customer.id));
+                                        }), view.total === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 6, 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((customer) => {
+                            const customerTotals = totals[customer.id] ?? NO_TOTALS;
+                            return (_jsxs("div", { className: "cursor-pointer rounded-xl border border-border bg-card p-4", onClick: () => adapter.openCustomer(customer.id), children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate font-medium text-foreground", children: customer.name }), _jsx("div", { className: "mt-1.5", children: _jsx(CompanyChip, { code: companyById.get(customer.companyId)?.code ?? null, labels: labels.companyChip }) })] }), _jsxs("div", { className: "shrink-0 text-right", children: [_jsx("div", { className: "font-medium tabular-nums text-foreground", children: totalsReady ? (formatters.formatMoney(customerTotals.totalAmount)) : (_jsx(Skeleton, { className: "ml-auto h-4 w-24" })) }), _jsxs("div", { className: "flex items-center justify-end gap-1.5 text-xs text-muted-foreground", children: [labels.list.columns.invoices, ":", " ", totalsReady ? (customerTotals.invoiceCount) : (_jsx(Skeleton, { className: "h-3 w-6" }))] })] })] }), customer.email && (_jsx("p", { className: "mt-2 truncate text-sm text-muted-foreground", children: customer.email })), totalsReady && customerTotals.overdueCount > 0 && (_jsxs("p", { className: "mt-2 text-xs text-destructive", children: [labels.list.columns.overdue, ": ", customerTotals.overdueCount] }))] }, customer.id));
+                        })) })] })), !customersQuery.isError && !customersQuery.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 }))] }));
+}

package/dist/pages/customers/edit-customer-dialog.d.ts

@@ -0,0 +1,9 @@
+import type { Customer, CustomersAdapter } from "../../adapters/customers";
+import type { CustomersLabels } from "./labels";
+export declare function EditCustomerDialog({ open, onOpenChange, customer, adapter, labels, }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    customer: Customer;
+    adapter: CustomersAdapter;
+    labels: CustomersLabels;
+}): import("react").JSX.Element;

package/dist/pages/customers/edit-customer-dialog.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "../../ui/button.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 { readableErrorMessage } from "../../components/feedback/query-states.js";
+import { FieldErrorText, RequiredMark } from "./form-hints.js";
+export function EditCustomerDialog({ open, onOpenChange, customer, adapter, labels, }) {
+    const dialogLabels = labels.detail.editDialog;
+    const [name, setName] = useState(customer.name);
+    const [contactPerson, setContactPerson] = useState(customer.contactPerson ?? "");
+    const [email, setEmail] = useState(customer.email ?? "");
+    const [phone, setPhone] = useState(customer.phone ?? "");
+    const [street, setStreet] = useState(customer.addressStreet ?? "");
+    const [zip, setZip] = useState(customer.addressZip ?? "");
+    const [city, setCity] = useState(customer.addressCity ?? "");
+    const [vatId, setVatId] = useState(customer.vatId ?? "");
+    const [customerNumber, setCustomerNumber] = useState(customer.customerNumber ?? "");
+    const [nameError, setNameError] = useState("");
+    const [isSaving, setIsSaving] = useState(false);
+    // Reopening must show the stored record, not an abandoned draft; a save elsewhere refreshes too.
+    const [syncedFrom, setSyncedFrom] = useState(customer.updatedAt);
+    if (open && syncedFrom !== customer.updatedAt) {
+        setSyncedFrom(customer.updatedAt);
+        setName(customer.name);
+        setContactPerson(customer.contactPerson ?? "");
+        setEmail(customer.email ?? "");
+        setPhone(customer.phone ?? "");
+        setStreet(customer.addressStreet ?? "");
+        setZip(customer.addressZip ?? "");
+        setCity(customer.addressCity ?? "");
+        setVatId(customer.vatId ?? "");
+        setCustomerNumber(customer.customerNumber ?? "");
+        setNameError("");
+    }
+    async function saveCustomer() {
+        if (!name.trim()) {
+            setNameError(labels.validation.name);
+            return;
+        }
+        setNameError("");
+        setIsSaving(true);
+        try {
+            await adapter.updateCustomer(customer.id, {
+                name: name.trim(),
+                contactPerson: contactPerson.trim() || null,
+                email: email.trim() || null,
+                phone: phone.trim() || null,
+                addressStreet: street.trim() || null,
+                addressZip: zip.trim() || null,
+                addressCity: city.trim() || null,
+                vatId: vatId.trim() || null,
+                customerNumber: customerNumber.trim() || null,
+            });
+            toast.success(dialogLabels.saved);
+            onOpenChange(false);
+        }
+        catch (error) {
+            toast.error(dialogLabels.failed(readableErrorMessage(error, "")));
+        }
+        finally {
+            setIsSaving(false);
+        }
+    }
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-lg", onClick: (event) => event.stopPropagation(), children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: dialogLabels.title }), _jsx(DialogDescription, { children: dialogLabels.description })] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { className: "text-xs text-muted-foreground", children: [labels.fields.name, " ", _jsx(RequiredMark, { title: labels.requiredField })] }), _jsx(Input, { value: name, onChange: (event) => {
+                                        setName(event.target.value);
+                                        if (nameError)
+                                            setNameError("");
+                                    }, "aria-invalid": !!nameError }), _jsx(FieldErrorText, { text: nameError })] }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: labels.fields.contactPerson }), _jsx(Input, { value: contactPerson, onChange: (event) => setContactPerson(event.target.value) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: labels.fields.customerNumber }), _jsx(Input, { value: customerNumber, onChange: (event) => setCustomerNumber(event.target.value) })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: labels.fields.street }), _jsx(Input, { value: street, onChange: (event) => setStreet(event.target.value) })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: labels.fields.zip }), _jsx(Input, { value: zip, onChange: (event) => setZip(event.target.value) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: labels.fields.city }), _jsx(Input, { value: city, onChange: (event) => setCity(event.target.value) })] })] }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: labels.fields.phone }), _jsx(Input, { value: phone, onChange: (event) => setPhone(event.target.value) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: labels.fields.email }), _jsx(Input, { value: email, onChange: (event) => setEmail(event.target.value) })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: labels.fields.vatId }), _jsx(Input, { value: vatId, onChange: (event) => setVatId(event.target.value) })] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), children: dialogLabels.cancel }), _jsx(Button, { onClick: saveCustomer, disabled: isSaving, children: isSaving ? dialogLabels.saving : dialogLabels.save })] })] }) }));
+}

package/dist/pages/customers/form-hints.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/customers/form-hints.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/customers/invoice-status-badge.d.ts

@@ -0,0 +1,10 @@
+import type { CustomerInvoiceStatus } from "../../adapters/customers";
+import type { CustomersLabels } from "./labels";
+export declare function countsAsRevenue(status: CustomerInvoiceStatus): boolean;
+export declare function isInvoiceOverdue(status: CustomerInvoiceStatus, dueDate: string | null | undefined, today: string): boolean;
+export declare function InvoiceStatusBadge({ status, dueDate, labels, className, }: {
+    status: CustomerInvoiceStatus;
+    dueDate: string | null | undefined;
+    labels: CustomersLabels["detail"]["invoiceStatus"];
+    className?: string;
+}): import("react").JSX.Element;

package/dist/pages/customers/invoice-status-badge.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/class-names.js";
+// Drafts and voided invoices stay visible in the table but never count as revenue.
+export function countsAsRevenue(status) {
+    return status !== "voided" && status !== "draft";
+}
+// Overdue is derived, not stored: an open invoice whose due date lies in the past.
+export function isInvoiceOverdue(status, dueDate, today) {
+    return status === "open" && !!dueDate && dueDate < today;
+}
+const STATUS_STYLE = {
+    paid: "bg-success-soft text-success",
+    voided: "bg-muted text-muted-foreground line-through",
+    overdue: "bg-danger-soft text-danger",
+    draft: "bg-warning-soft text-warning",
+    open: "bg-muted text-muted-foreground",
+};
+export function InvoiceStatusBadge({ status, dueDate, labels, className, }) {
+    const today = new Date().toISOString().slice(0, 10);
+    const key = isInvoiceOverdue(status, dueDate, today) ? "overdue" : status;
+    return (_jsx("span", { className: cn("inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium", STATUS_STYLE[key], className), children: labels[key] }));
+}

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

@@ -0,0 +1,116 @@
+export interface CustomersLabels {
+    list: {
+        title: string;
+        subtitle: string;
+        searchPlaceholder: string;
+        empty: string;
+        columns: {
+            name: string;
+            company: string;
+            email: string;
+            invoices: string;
+            amount: string;
+            overdue: string;
+        };
+    };
+    sort: {
+        label: string;
+        ascending: string;
+        descending: string;
+    };
+    fields: {
+        name: string;
+        company: string;
+        contactPerson: string;
+        customerNumber: string;
+        address: string;
+        street: string;
+        zip: string;
+        city: string;
+        vatId: string;
+        phone: string;
+        email: string;
+    };
+    examples: {
+        name: string;
+        street: string;
+        zip: string;
+        city: string;
+        email: string;
+    };
+    validation: {
+        company: string;
+        name: string;
+        zip: string;
+        email: string;
+    };
+    requiredField: string;
+    copy: {
+        action: (fieldLabel: string) => string;
+        copied: (fieldLabel: string) => string;
+        failed: string;
+    };
+    companyChip: {
+        missing: string;
+        missingTitle: string;
+    };
+    newCustomer: {
+        button: string;
+        title: string;
+        description: string;
+        companyPlaceholder: string;
+        isCompany: string;
+        cancel: string;
+        create: string;
+        creating: string;
+        formIncomplete: string;
+        created: string;
+        createFailed: (error: string) => string;
+    };
+    detail: {
+        back: string;
+        notFoundTitle: string;
+        toList: string;
+        editButton: string;
+        deleteButton: string;
+        masterDataSection: string;
+        masterDataHint: string;
+        invoicesSection: string;
+        invoiceTotal: (count: number) => string;
+        notCounted: (count: number) => string;
+        invoicesEmpty: string;
+        draftNumber: string;
+        invoiceColumns: {
+            number: string;
+            date: string;
+            amount: string;
+            status: string;
+        };
+        invoiceStatus: {
+            draft: string;
+            open: string;
+            overdue: string;
+            paid: string;
+            voided: string;
+        };
+        deleteDialog: {
+            title: string;
+            description: string;
+            reasonPlaceholder: string;
+            cancel: string;
+            confirm: string;
+            deleted: string;
+            failed: (error: string) => string;
+        };
+        editDialog: {
+            title: string;
+            description: string;
+            cancel: string;
+            save: string;
+            saving: string;
+            saved: string;
+            failed: (error: string) => string;
+        };
+    };
+}
+export declare const englishCustomersLabels: CustomersLabels;

package/dist/pages/customers/labels.js

@@ -0,0 +1,117 @@
+export const englishCustomersLabels = {
+    list: {
+        title: "Customers",
+        subtitle: "Customer master data and their outgoing invoices.",
+        searchPlaceholder: "Search name, email or company …",
+        empty: "No customers found.",
+        columns: {
+            name: "Name",
+            company: "Company",
+            email: "Email",
+            invoices: "Invoices",
+            amount: "Amount",
+            overdue: "Overdue",
+        },
+    },
+    sort: {
+        label: "Sort by",
+        ascending: "Ascending",
+        descending: "Descending",
+    },
+    fields: {
+        name: "Name",
+        company: "Company",
+        contactPerson: "Contact person",
+        customerNumber: "Customer number",
+        address: "Address",
+        street: "Street",
+        zip: "Postal code",
+        city: "City",
+        vatId: "VAT ID",
+        phone: "Phone",
+        email: "Email",
+    },
+    examples: {
+        name: "e.g. Acme Ltd",
+        street: "e.g. Main Street 12",
+        zip: "e.g. 10115",
+        city: "e.g. Berlin",
+        email: "e.g. billing@acme.com",
+    },
+    validation: {
+        company: "Please choose a company.",
+        name: "Please enter a name.",
+        zip: "Please enter a valid postal code.",
+        email: "Please enter a valid email address.",
+    },
+    requiredField: "Required field",
+    copy: {
+        action: (fieldLabel) => `Copy ${fieldLabel}`,
+        copied: (fieldLabel) => `${fieldLabel} copied.`,
+        failed: "Copying failed.",
+    },
+    companyChip: {
+        missing: "No company",
+        missingTitle: "No company is assigned yet.",
+    },
+    newCustomer: {
+        button: "New customer",
+        title: "Create customer",
+        description: "Create a new customer record.",
+        companyPlaceholder: "Choose a company …",
+        isCompany: "This customer is a company",
+        cancel: "Cancel",
+        create: "Create",
+        creating: "Creating …",
+        formIncomplete: "Please complete the highlighted fields.",
+        created: "Customer created.",
+        createFailed: (error) => `Creating the customer failed: ${error}`,
+    },
+    detail: {
+        back: "Back to customers",
+        notFoundTitle: "Customer not found.",
+        toList: "To the customer list",
+        editButton: "Edit",
+        deleteButton: "Delete",
+        masterDataSection: "Master data",
+        masterDataHint: "Use the Edit button above to change these fields.",
+        invoicesSection: "Outgoing invoices",
+        invoiceTotal: (count) => `Total of ${count} ${count === 1 ? "invoice" : "invoices"}`,
+        notCounted: (count) => count === 1
+            ? "1 draft or voided invoice is not counted"
+            : `${count} draft or voided invoices are not counted`,
+        invoicesEmpty: "No invoices for this customer yet.",
+        draftNumber: "Draft",
+        invoiceColumns: {
+            number: "Number",
+            date: "Date",
+            amount: "Amount",
+            status: "Status",
+        },
+        invoiceStatus: {
+            draft: "Draft",
+            open: "Open",
+            overdue: "Overdue",
+            paid: "Paid",
+            voided: "Voided",
+        },
+        deleteDialog: {
+            title: "Delete this customer?",
+            description: "The customer is removed from the list and can be restored later.",
+            reasonPlaceholder: "Reason for deleting …",
+            cancel: "Cancel",
+            confirm: "Delete",
+            deleted: "Customer deleted.",
+            failed: (error) => `Deleting the customer failed: ${error}`,
+        },
+        editDialog: {
+            title: "Edit customer",
+            description: "Change the customer's master data.",
+            cancel: "Cancel",
+            save: "Save",
+            saving: "Saving …",
+            saved: "Customer saved.",
+            failed: (error) => `Saving the customer failed: ${error}`,
+        },
+    },
+};

package/dist/pages/customers/new-customer-dialog.d.ts

@@ -0,0 +1,6 @@
+import type { CustomersAdapter } from "../../adapters/customers";
+import type { CustomersLabels } from "./labels";
+export declare function NewCustomerDialog({ adapter, labels, }: {
+    adapter: CustomersAdapter;
+    labels: CustomersLabels;
+}): import("react").JSX.Element;