@hub-kit/core 0.3.0

package/dist/pages/invoice-detail/InvoiceDetailPage.js

@@ -0,0 +1,292 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { ArrowLeft, Archive, ArchiveRestore, MoreVertical, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "../../ui/button.js";
+import { Input } from "../../ui/input.js";
+import { Label } from "../../ui/label.js";
+import { Textarea } from "../../ui/textarea.js";
+import { Combobox } from "../../ui/combobox.js";
+import { Switch } from "../../ui/switch.js";
+import { Skeleton } from "../../ui/skeleton.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "../../ui/dialog.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "../../ui/dropdown-menu.js";
+import { ErrorState, readableErrorMessage } from "../../components/feedback/query-states.js";
+import { cn } from "../../lib/class-names.js";
+import { englishFormatters } from "../../lib/formatters.js";
+import { OutgoingInvoiceBanner } from "./OutgoingInvoiceFlag.js";
+import { buildReviewSummary, hasNoReviewChecks, reviewLines } from "./review.js";
+import { ReviewBadge } from "./ReviewBadge.js";
+import { ReviewCard } from "./ReviewCard.js";
+import { WorkflowLadder } from "./WorkflowLadder.js";
+import { WorkflowHistoryList } from "./WorkflowHistoryList.js";
+import { historyLines, historyQualifier, historyStateLabel } from "./history.js";
+import { englishInvoiceDetailLabels } from "./labels.js";
+const NONE = "__none";
+function overviewFormFrom(invoice) {
+    const s = (v) => v ?? "";
+    const n = (v) => (v == null ? "" : String(v));
+    return {
+        issuer: s(invoice.issuer),
+        invoice_number: s(invoice.invoice_number),
+        order_number: s(invoice.order_number),
+        document_date: s(invoice.document_date),
+        due_date: s(invoice.due_date),
+        service_date: s(invoice.service_date),
+        amount_net: n(invoice.amount_net),
+        vat_rate: n(invoice.vat_rate),
+        vat_amount: n(invoice.vat_amount),
+        amount_gross: n(invoice.amount_gross),
+        currency: s(invoice.currency),
+        company_code: s(invoice.company_code),
+        property_code: s(invoice.property_code),
+        category_id: s(invoice.category_id),
+    };
+}
+function detailsFormFrom(invoice) {
+    const s = (v) => v ?? "";
+    return {
+        recipient_name: s(invoice.recipient_name),
+        customer_number: s(invoice.customer_number),
+        payment_reference: s(invoice.payment_reference),
+        payment_method: s(invoice.payment_method),
+        tax_note: s(invoice.tax_note),
+        service_description: s(invoice.service_description),
+    };
+}
+function parseNumber(value) {
+    const trimmed = value.trim();
+    if (trimmed === "")
+        return null;
+    const n = Number(trimmed.replace(",", "."));
+    return Number.isFinite(n) ? n : NaN;
+}
+function diff(form, base, numericKeys, labelFor) {
+    const changes = {};
+    const labels = [];
+    const invalid = [];
+    for (const key of Object.keys(form)) {
+        const isNumeric = numericKeys.includes(key);
+        const raw = form[key];
+        const next = isNumeric ? parseNumber(raw) : raw.trim() === "" ? null : raw.trim();
+        if (isNumeric && Number.isNaN(next)) {
+            invalid.push(labelFor(key));
+            continue;
+        }
+        const prev = base[key] ?? null;
+        if (next !== prev) {
+            changes[key] = next;
+            labels.push(labelFor(key));
+        }
+    }
+    return { changes, labels, invalid };
+}
+export function InvoiceDetailPage({ invoiceId, adapter, config, labels = englishInvoiceDetailLabels, formatters = englishFormatters, }) {
+    const page = labels.page;
+    const invoiceQuery = adapter.useInvoice(invoiceId);
+    const historyQuery = adapter.useHistory(invoiceId);
+    const companyOptionsQuery = adapter.useCompanyOptions();
+    const propertyOptionsQuery = adapter.usePropertyOptions();
+    const categoryOptionsQuery = adapter.useCategoryOptions();
+    const [activeTab, setActiveTab] = useState("overview");
+    const [overviewEditOpen, setOverviewEditOpen] = useState(false);
+    const [detailsEditOpen, setDetailsEditOpen] = useState(false);
+    const [overviewForm, setOverviewForm] = useState(null);
+    const [detailsForm, setDetailsForm] = useState(null);
+    const [isSaving, setIsSaving] = useState(false);
+    const [noteText, setNoteText] = useState("");
+    const [deleteOpen, setDeleteOpen] = useState(false);
+    const [deleteReason, setDeleteReason] = useState("");
+    const [approvalComment, setApprovalComment] = useState("");
+    const [reviewOpen, setReviewOpen] = useState(false);
+    const [reviewFlash, setReviewFlash] = useState(false);
+    const invoice = invoiceQuery.data;
+    const legalActionsQuery = adapter.approval?.useLegalActions(invoice ?? {});
+    const payableAccountQuery = adapter.payment?.usePayableAccount(invoice ?? {});
+    const reviewSummary = useMemo(() => (invoice ? buildReviewSummary(invoice) : null), [invoice]);
+    const lines = useMemo(() => reviewSummary
+        ? reviewLines(reviewSummary.reasons, labels.review, config.fieldJumpTargets)
+        : [], [reviewSummary, labels.review, config.fieldJumpTargets]);
+    const historyRows = useMemo(() => {
+        const rows = historyQuery.data;
+        const sorted = [...rows].sort((a, b) => a.createdAt.localeCompare(b.createdAt));
+        const historyFormat = {
+            approvalActionLabelDe: () => "",
+            workflowLabelDe: () => "",
+            workflowOrder: config.workflowSteps,
+        };
+        let lastTime = invoice ? new Date(invoice.created_at).getTime() : 0;
+        return sorted.map((entry) => {
+            const createdTime = new Date(entry.createdAt).getTime();
+            const durationMs = Math.max(0, createdTime - lastTime);
+            lastTime = createdTime;
+            const allLines = historyLines(entry, config, historyFormat);
+            return {
+                entry,
+                from: "",
+                to: historyStateLabel(entry, config, historyFormat, labels.history),
+                qualifier: historyQualifier(entry, labels.history),
+                comment: allLines[0] ?? null,
+                durationMs,
+            };
+        });
+    }, [historyQuery.data, config, labels.history, invoice]);
+    if (invoiceQuery.error) {
+        return _jsx(ErrorState, { error: invoiceQuery.error, onRetry: () => invoiceQuery.refetch() });
+    }
+    if (invoiceQuery.loading) {
+        return (_jsxs("div", { className: "space-y-6", children: [_jsx(Skeleton, { className: "h-8 w-64" }), _jsx(Skeleton, { className: "h-48 rounded-xl" }), _jsx(Skeleton, { className: "h-96 rounded-xl" })] }));
+    }
+    if (!invoice) {
+        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: page.notFoundTitle }), _jsx("p", { className: "mt-2 text-base text-muted-foreground", children: page.notFoundBody(invoiceId) }), _jsx(Button, { className: "mt-6", onClick: adapter.openInvoiceList, children: page.backToList })] }));
+    }
+    function openOverviewEdit() {
+        setOverviewForm(overviewFormFrom(invoice));
+        setOverviewEditOpen(true);
+    }
+    function openDetailsEdit() {
+        setDetailsForm(detailsFormFrom(invoice));
+        setDetailsEditOpen(true);
+    }
+    async function saveOverview() {
+        if (!overviewForm)
+            return;
+        const { changes, labels: changed, invalid } = diff(overviewForm, invoice, ["amount_net", "vat_rate", "vat_amount", "amount_gross"], fieldLabel);
+        if (invalid.length > 0) {
+            toast.error(page.saveFailed(invalid.join(", ")));
+            return;
+        }
+        if (Object.keys(changes).length === 0) {
+            setOverviewEditOpen(false);
+            return;
+        }
+        setIsSaving(true);
+        try {
+            await adapter.updateInvoice(invoice.id, changes, changed);
+            toast.success(page.saved);
+            setOverviewEditOpen(false);
+        }
+        catch (error) {
+            toast.error(page.saveFailed(readableErrorMessage(error, "")));
+        }
+        finally {
+            setIsSaving(false);
+        }
+    }
+    async function saveDetails() {
+        if (!detailsForm)
+            return;
+        const { changes, labels: changed } = diff(detailsForm, invoice, [], fieldLabel);
+        if (Object.keys(changes).length === 0) {
+            setDetailsEditOpen(false);
+            return;
+        }
+        setIsSaving(true);
+        try {
+            await adapter.updateInvoice(invoice.id, changes, changed);
+            toast.success(page.saved);
+            setDetailsEditOpen(false);
+        }
+        catch (error) {
+            toast.error(page.saveFailed(readableErrorMessage(error, "")));
+        }
+        finally {
+            setIsSaving(false);
+        }
+    }
+    function fieldLabel(key) {
+        const map = {
+            issuer: page.fieldIssuer,
+            invoice_number: page.fieldInvoiceNumber,
+            order_number: page.fieldOrderNumber,
+            document_date: page.fieldDocumentDate,
+            due_date: page.fieldDueDate,
+            service_date: page.fieldServiceDate,
+            amount_net: page.fieldAmountNet,
+            vat_rate: page.fieldVatRate,
+            vat_amount: page.fieldVatAmount,
+            amount_gross: page.fieldAmountGross,
+            currency: page.fieldCurrency,
+            company_code: page.fieldCompany,
+            property_code: page.fieldProperty,
+            category_id: page.fieldCategory,
+            recipient_name: page.fieldRecipientName,
+            customer_number: page.fieldCustomerNumber,
+            payment_reference: page.fieldPaymentReference,
+            payment_method: page.fieldPaymentMethod,
+            tax_note: page.fieldTaxNote,
+            service_description: page.fieldServiceDescription,
+        };
+        return map[key] ?? key;
+    }
+    async function addNote() {
+        const text = noteText.trim();
+        if (!text)
+            return;
+        try {
+            await adapter.addNote(invoice.id, text);
+            setNoteText("");
+            toast.success(page.noteAdded);
+        }
+        catch (error) {
+            toast.error(readableErrorMessage(error, ""));
+        }
+    }
+    async function confirmDelete() {
+        try {
+            await adapter.softDelete(invoice.id, deleteReason.trim());
+            toast.success(page.deletedToast);
+            setDeleteOpen(false);
+            adapter.openInvoiceList();
+        }
+        catch (error) {
+            toast.error(readableErrorMessage(error, ""));
+        }
+    }
+    async function togglePaid() {
+        if (!adapter.payment)
+            return;
+        try {
+            await adapter.payment.setPaid(invoice.id, !invoice.paid_at);
+            toast.success(page.paidToast);
+        }
+        catch (error) {
+            toast.error(readableErrorMessage(error, ""));
+        }
+    }
+    async function runApprovalAction(actionId, requiresComment) {
+        if (!adapter.approval)
+            return;
+        if (requiresComment && !approvalComment.trim())
+            return;
+        try {
+            await adapter.approval.runAction(invoice.id, actionId, approvalComment.trim() || undefined);
+            setApprovalComment("");
+        }
+        catch (error) {
+            toast.error(readableErrorMessage(error, ""));
+        }
+    }
+    const reasonCount = reviewSummary?.reasons.length ?? 0;
+    const unchecked = hasNoReviewChecks(invoice);
+    const currentStepIndex = config.workflowSteps.indexOf(invoice.workflow_status ?? config.workflowSteps[0]);
+    const legalActionsMap = new Map(legalActionsQuery?.data
+        ? Array.from(legalActionsQuery.data.entries()).map(([step, action]) => [step, action])
+        : []);
+    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.openInvoiceList, children: [_jsx(ArrowLeft, { className: "size-4" }), page.backToList] }), _jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-2", children: [_jsx("h1", { className: "truncate text-2xl font-semibold tracking-tight text-foreground", children: invoice.issuer ?? "—" }), _jsx(ReviewBadge, { reasonCount: reasonCount, unchecked: unchecked, status: invoice.status, alreadyPaid: !!invoice.paid_at, labels: labels.review })] }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: invoice.invoice_number ? `#${invoice.invoice_number}` : page.noInvoiceNumber })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [adapter.archive && (_jsxs(Button, { variant: "outline", size: "sm", className: "gap-1.5", onClick: () => invoice.archived_at ? adapter.archive.unarchive(invoice.id) : adapter.archive.archive(invoice.id, ""), children: [invoice.archived_at ? _jsx(ArchiveRestore, { className: "size-4" }) : _jsx(Archive, { className: "size-4" }), invoice.archived_at ? page.unarchiveButton : page.archiveButton] })), _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: _jsxs(DropdownMenuItem, { onClick: () => setDeleteOpen(true), className: "text-destructive", children: [_jsx(Trash2, { className: "size-4" }), page.deleteButton] }) })] })] })] }), invoice.archived_at && (_jsx("div", { className: "rounded-xl border border-border bg-muted/40 px-4 py-3 text-sm text-muted-foreground", children: page.archivedBanner(formatters.formatDate(invoice.archived_at)) })), _jsx(OutgoingInvoiceBanner, { invoice: invoice, labels: labels.outgoing }), lines.length > 0 && (_jsx(ReviewCard, { lines: lines, anchorId: "review-box", open: reviewOpen, onOpenChange: setReviewOpen, flash: reviewFlash, onJump: (tab) => {
+                    setActiveTab(tab);
+                    setReviewFlash(true);
+                    window.setTimeout(() => setReviewFlash(false), 1800);
+                }, labels: labels.review })), adapter.approval && (_jsx("div", { className: "rounded-xl border border-border bg-card p-4", children: _jsx(WorkflowLadder, { steps: config.workflowSteps, currentStep: currentStepIndex, actions: legalActionsMap, onAction: (step) => {
+                        const action = legalActionsQuery?.data.get(step);
+                        if (action)
+                            void runApprovalAction(action.id, action.requiresComment);
+                    }, labels: labels.workflowLadder, ladderColors: config.ladderColors }) })), _jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "overview", children: page.tabOverview }), adapter.approval && _jsx(TabsTrigger, { value: "approval", children: page.tabApproval }), adapter.payment && _jsx(TabsTrigger, { value: "payment", children: page.tabPayment }), _jsx(TabsTrigger, { value: "details", children: page.tabDetails }), _jsx(TabsTrigger, { value: "history", children: page.tabHistory })] }), _jsxs(TabsContent, { value: "overview", className: "mt-4 space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "text-base font-semibold text-foreground", children: page.tabOverview }), adapter.canEdit && (_jsx(Button, { variant: "outline", size: "sm", onClick: openOverviewEdit, children: page.edit }))] }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: [_jsx(Field, { label: page.fieldAmountNet, value: formatters.formatMoney(invoice.amount_net) }), _jsx(Field, { label: page.fieldVatAmount, value: formatters.formatMoney(invoice.vat_amount) }), _jsx(Field, { label: page.fieldAmountGross, value: formatters.formatMoney(invoice.amount_gross) }), _jsx(Field, { label: page.fieldInvoiceNumber, value: invoice.invoice_number ?? "—" }), _jsx(Field, { label: page.fieldDocumentDate, value: formatters.formatDate(invoice.document_date) }), _jsx(Field, { label: page.fieldDueDate, value: formatters.formatDate(invoice.due_date) }), _jsx(Field, { label: page.fieldCompany, value: invoice.company_code ?? "—" }), _jsx(Field, { label: page.fieldProperty, value: invoice.property_code ?? "—" }), _jsx(Field, { label: page.fieldCategory, value: invoice.cost_category ?? "—" })] })] }), adapter.approval && (_jsx(TabsContent, { value: "approval", className: "mt-4 space-y-4", children: legalActionsMap.size > 0 ? (_jsxs("div", { className: "space-y-3 rounded-xl border border-border bg-card p-4", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: page.approvalComment }), _jsx(Textarea, { value: approvalComment, onChange: (event) => setApprovalComment(event.target.value), placeholder: page.approvalCommentPlaceholder, rows: 2 }), _jsx("div", { className: "flex flex-wrap gap-2", children: Array.from(legalActionsQuery?.data?.entries() ?? []).map(([step, action]) => (_jsxs(Button, { size: "sm", onClick: () => runApprovalAction(action.id, action.requiresComment), children: [page.runAction, " \u2014 ", step] }, step))) })] })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: page.noActionsAvailable })) })), adapter.payment && (_jsxs(TabsContent, { value: "payment", className: "mt-4 space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between rounded-xl border border-border bg-card p-4", children: [_jsx("span", { className: "text-sm text-foreground", children: invoice.paid_at ? page.markUnpaid : page.markPaid }), _jsx(Switch, { checked: !!invoice.paid_at, onCheckedChange: togglePaid })] }), _jsxs("div", { className: "rounded-xl border border-border bg-card p-4", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: page.payableAccount }), payableAccountQuery?.loading ? (_jsx(Skeleton, { className: "mt-2 h-4 w-48" })) : payableAccountQuery?.data ? (_jsxs("p", { className: "mt-1 text-sm text-foreground", children: [payableAccountQuery.data.iban, payableAccountQuery.data.bankName ? ` · ${payableAccountQuery.data.bankName}` : ""] })) : (_jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: page.noPayableAccount }))] })] })), _jsxs(TabsContent, { value: "details", className: "mt-4 space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "text-base font-semibold text-foreground", children: page.tabDetails }), adapter.canEdit && (_jsx(Button, { variant: "outline", size: "sm", onClick: openDetailsEdit, children: page.edit }))] }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: [_jsx(Field, { label: page.fieldRecipientName, value: invoice.recipient_name ?? "—" }), _jsx(Field, { label: page.fieldCustomerNumber, value: invoice.customer_number ?? "—" }), _jsx(Field, { label: page.fieldPaymentReference, value: invoice.payment_reference ?? "—" }), _jsx(Field, { label: page.fieldPaymentMethod, value: invoice.payment_method ?? "—" }), _jsx(Field, { label: page.fieldTaxNote, value: invoice.tax_note ?? "—" }), _jsx(Field, { label: page.fieldServiceDescription, value: invoice.service_description ?? "—" })] }), adapter.supplier && invoice.supplier_id && (_jsx(Button, { variant: "outline", size: "sm", onClick: () => adapter.supplier.openSupplier(invoice.supplier_id), children: page.openSupplier }))] }), _jsxs(TabsContent, { value: "history", className: "mt-4 space-y-4", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx(Textarea, { value: noteText, onChange: (event) => setNoteText(event.target.value), placeholder: page.addNotePlaceholder, rows: 2, className: "flex-1" }), _jsx(Button, { onClick: addNote, disabled: !noteText.trim(), children: page.addNoteButton })] }), historyQuery.loading ? (_jsx(Skeleton, { className: "h-48 w-full rounded-xl" })) : (_jsx(WorkflowHistoryList, { rows: historyRows, arrivedAt: invoice.created_at, labels: labels.workflowHistory }))] })] }), _jsx(Dialog, { open: overviewEditOpen, onOpenChange: setOverviewEditOpen, children: _jsxs(DialogContent, { className: "max-w-2xl", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: page.tabOverview }) }), overviewForm && (_jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsx(TextField, { label: page.fieldIssuer, value: overviewForm.issuer, onChange: (v) => setOverviewForm({ ...overviewForm, issuer: v }) }), _jsx(TextField, { label: page.fieldInvoiceNumber, value: overviewForm.invoice_number, onChange: (v) => setOverviewForm({ ...overviewForm, invoice_number: v }) }), _jsx(TextField, { label: page.fieldOrderNumber, value: overviewForm.order_number, onChange: (v) => setOverviewForm({ ...overviewForm, order_number: v }) }), _jsx(TextField, { label: page.fieldDocumentDate, value: overviewForm.document_date, onChange: (v) => setOverviewForm({ ...overviewForm, document_date: v }), type: "date" }), _jsx(TextField, { label: page.fieldDueDate, value: overviewForm.due_date, onChange: (v) => setOverviewForm({ ...overviewForm, due_date: v }), type: "date" }), _jsx(TextField, { label: page.fieldServiceDate, value: overviewForm.service_date, onChange: (v) => setOverviewForm({ ...overviewForm, service_date: v }), type: "date" }), _jsx(TextField, { label: page.fieldAmountNet, value: overviewForm.amount_net, onChange: (v) => setOverviewForm({ ...overviewForm, amount_net: v }) }), _jsx(TextField, { label: page.fieldVatRate, value: overviewForm.vat_rate, onChange: (v) => setOverviewForm({ ...overviewForm, vat_rate: v }) }), _jsx(TextField, { label: page.fieldVatAmount, value: overviewForm.vat_amount, onChange: (v) => setOverviewForm({ ...overviewForm, vat_amount: v }) }), _jsx(TextField, { label: page.fieldAmountGross, value: overviewForm.amount_gross, onChange: (v) => setOverviewForm({ ...overviewForm, amount_gross: v }) }), _jsx(TextField, { label: page.fieldCurrency, value: overviewForm.currency, onChange: (v) => setOverviewForm({ ...overviewForm, currency: v }) }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: page.fieldCompany }), _jsx(Combobox, { value: overviewForm.company_code || NONE, onValueChange: (v) => setOverviewForm({ ...overviewForm, company_code: v === NONE ? "" : v }), options: [{ value: NONE, label: "—" }, ...(companyOptionsQuery.data ?? []).map((c) => ({ value: c.code, label: `${c.code} — ${c.name}` }))] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: page.fieldProperty }), _jsx(Combobox, { value: overviewForm.property_code || NONE, onValueChange: (v) => setOverviewForm({ ...overviewForm, property_code: v === NONE ? "" : v }), options: [{ value: NONE, label: "—" }, ...(propertyOptionsQuery.data ?? []).map((p) => ({ value: p.code, label: `${p.code} — ${p.name}` }))] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: page.fieldCategory }), _jsx(Combobox, { value: overviewForm.category_id || NONE, onValueChange: (v) => setOverviewForm({ ...overviewForm, category_id: v === NONE ? "" : v }), options: [{ value: NONE, label: "—" }, ...(categoryOptionsQuery.data ?? []).map((c) => ({ value: c.id, label: c.name }))] })] })] })), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => setOverviewEditOpen(false), children: page.cancel }), _jsx(Button, { onClick: saveOverview, disabled: isSaving, children: isSaving ? page.saving : page.save })] })] }) }), _jsx(Dialog, { open: detailsEditOpen, onOpenChange: setDetailsEditOpen, children: _jsxs(DialogContent, { className: "max-w-2xl", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: page.tabDetails }) }), detailsForm && (_jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsx(TextField, { label: page.fieldRecipientName, value: detailsForm.recipient_name, onChange: (v) => setDetailsForm({ ...detailsForm, recipient_name: v }) }), _jsx(TextField, { label: page.fieldCustomerNumber, value: detailsForm.customer_number, onChange: (v) => setDetailsForm({ ...detailsForm, customer_number: v }) }), _jsx(TextField, { label: page.fieldPaymentReference, value: detailsForm.payment_reference, onChange: (v) => setDetailsForm({ ...detailsForm, payment_reference: v }) }), _jsx(TextField, { label: page.fieldPaymentMethod, value: detailsForm.payment_method, onChange: (v) => setDetailsForm({ ...detailsForm, payment_method: v }) }), _jsx(TextField, { label: page.fieldTaxNote, value: detailsForm.tax_note, onChange: (v) => setDetailsForm({ ...detailsForm, tax_note: v }) }), _jsx(TextField, { label: page.fieldServiceDescription, value: detailsForm.service_description, onChange: (v) => setDetailsForm({ ...detailsForm, service_description: v }) })] })), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => setDetailsEditOpen(false), children: page.cancel }), _jsx(Button, { onClick: saveDetails, disabled: isSaving, children: isSaving ? page.saving : page.save })] })] }) }), _jsx(Dialog, { open: deleteOpen, onOpenChange: setDeleteOpen, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: page.deleteDialogTitle }), _jsx(DialogDescription, { children: page.deleteDialogDescription })] }), _jsx(Textarea, { value: deleteReason, onChange: (event) => setDeleteReason(event.target.value), placeholder: page.deleteReasonPlaceholder, rows: 2 }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => setDeleteOpen(false), children: page.cancel }), _jsx(Button, { variant: "destructive", onClick: confirmDelete, children: page.deleteConfirm })] })] }) })] }));
+}
+function Field({ label, value }) {
+    return (_jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted-foreground", children: label }), _jsx("div", { className: cn("mt-0.5 text-sm text-foreground", value === "—" && "text-muted-foreground"), children: value })] }));
+}
+function TextField({ label, value, onChange, type = "text", }) {
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: label }), _jsx(Input, { type: type, value: value, onChange: (event) => onChange(event.target.value) })] }));
+}

package/dist/pages/invoice-detail/OutgoingInvoiceFlag.d.ts

@@ -0,0 +1,26 @@
+import { Extracted } from "./pipeline-types";
+export declare function isOutgoingInvoice(invoice: {
+    extracted: Extracted | null;
+}): boolean;
+export interface OutgoingInvoiceLabels {
+    banner: (issuer: string, recipient: string) => string;
+    bannerShort: string;
+    unknownIssuer: string;
+    unknownRecipient: string;
+}
+interface OutgoingInvoiceFields {
+    extracted: Extracted | null;
+    issuer: string | null;
+    recipient_name: string | null;
+}
+export declare function OutgoingInvoiceBanner({ invoice, labels, className, }: {
+    invoice: OutgoingInvoiceFields;
+    labels: OutgoingInvoiceLabels;
+    className?: string;
+}): import("react").JSX.Element | null;
+export declare function OutgoingInvoiceBadge({ invoice, labels, className, }: {
+    invoice: OutgoingInvoiceFields;
+    labels: OutgoingInvoiceLabels;
+    className?: string;
+}): import("react").JSX.Element | null;
+export {};

package/dist/pages/invoice-detail/OutgoingInvoiceFlag.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Send } from "lucide-react";
+import { cn } from "../../lib/class-names.js";
+export function isOutgoingInvoice(invoice) {
+    return invoice.extracted?.richtung?.trim().toLowerCase() === "ausgang";
+}
+export function OutgoingInvoiceBanner({ invoice, labels, className, }) {
+    if (!isOutgoingInvoice(invoice))
+        return null;
+    return (_jsx("div", { className: cn("rounded-xl border border-rose-300 bg-rose-50 px-4 py-3 text-base text-rose-900", className), children: _jsxs("div", { className: "flex items-center gap-2 font-semibold", children: [_jsx(Send, { className: "size-4 shrink-0" }), labels.banner(invoice.issuer ?? labels.unknownIssuer, invoice.recipient_name ?? labels.unknownRecipient)] }) }));
+}
+export function OutgoingInvoiceBadge({ invoice, labels, className, }) {
+    if (!isOutgoingInvoice(invoice))
+        return null;
+    return (_jsx("span", { title: labels.banner(invoice.issuer ?? labels.unknownIssuer, invoice.recipient_name ?? labels.unknownRecipient), className: cn("inline-flex shrink-0 items-center gap-1 rounded-md border border-rose-300 bg-rose-50 px-1.5 py-0.5 text-xs font-medium text-rose-900", className), children: labels.bannerShort }));
+}

package/dist/pages/invoice-detail/ReviewBadge.d.ts

@@ -0,0 +1,15 @@
+export interface ReviewBadgeLabels {
+    none: string;
+    duplicate: string;
+    excluded: string;
+    alreadyPaid: string;
+    needed: string;
+}
+export declare function ReviewBadge({ reasonCount, status, alreadyPaid, unchecked, labels, className, }: {
+    reasonCount?: number;
+    unchecked?: boolean;
+    status?: string | null;
+    alreadyPaid?: boolean;
+    labels: ReviewBadgeLabels;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/pages/invoice-detail/ReviewBadge.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Copy, TriangleAlert, X } from "lucide-react";
+import { cn } from "../../lib/class-names.js";
+export function ReviewBadge({ reasonCount = 0, status, alreadyPaid = false, unchecked = false, labels, className, }) {
+    const state = status === "duplikat"
+        ? "duplicate"
+        : status === "ausgeschlossen"
+            ? "excluded"
+            : alreadyPaid
+                ? "alreadyPaid"
+                : reasonCount > 0 || (unchecked && status === "zu_pruefen")
+                    ? "needed"
+                    : "none";
+    return (_jsxs("span", { className: cn("inline-flex items-center gap-1.5 whitespace-nowrap rounded-md px-2 py-0.5 text-xs font-medium", state === "needed"
+            ? "bg-red-100 text-red-800"
+            : state === "duplicate"
+                ? "bg-orange-100 text-orange-800"
+                : state === "excluded"
+                    ? "bg-muted text-muted-foreground"
+                    : state === "alreadyPaid"
+                        ? "bg-slate-100 text-slate-700"
+                        : "bg-emerald-100 text-emerald-800", className), children: [state === "none" ? (_jsx(Check, { className: "size-3.5 shrink-0" })) : state === "duplicate" ? (_jsx(Copy, { className: "size-3.5 shrink-0" })) : state === "excluded" ? (_jsx(X, { className: "size-3.5 shrink-0" })) : (_jsx(TriangleAlert, { className: "size-3.5 shrink-0" })), labels[state], state === "needed" && reasonCount > 0 && _jsxs("span", { className: "tabular-nums opacity-70", children: ["\u00B7 ", reasonCount] })] }));
+}

package/dist/pages/invoice-detail/ReviewCard.d.ts

@@ -0,0 +1,17 @@
+import { ReviewLine } from "./review";
+export interface ReviewCardLabels {
+    title: string;
+    checks: (count: number) => string;
+    choose: string;
+    fix: string;
+}
+export declare function ReviewCard({ lines, anchorId, open, onOpenChange, flash, onJump, labels, className, }: {
+    lines: ReviewLine[];
+    anchorId: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    flash: boolean;
+    onJump: (tab: string, anchor: string) => void;
+    labels: ReviewCardLabels;
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/pages/invoice-detail/ReviewCard.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowRight, ChevronRight, TriangleAlert } from "lucide-react";
+import { cn } from "../../lib/class-names.js";
+import { SEVERITY_ACTION_REQUIRED } from "./review.js";
+export function ReviewCard({ lines, anchorId, open, onOpenChange, flash, onJump, labels, className, }) {
+    if (lines.length === 0)
+        return null;
+    return (_jsxs("details", { id: anchorId, open: open, onToggle: (e) => onOpenChange(e.currentTarget.open), className: cn("group scroll-mt-24 rounded-xl border p-4 text-base transition-shadow duration-500", className, flash && "ring-2 ring-destructive ring-offset-2", "border-destructive/40 bg-destructive/5 text-destructive"), children: [_jsxs("summary", { className: "flex cursor-pointer list-none items-center gap-2 font-medium [&::-webkit-details-marker]:hidden", children: [_jsx(TriangleAlert, { className: "size-4 shrink-0 text-destructive" }), _jsx("span", { className: "min-w-0 flex-1", children: labels.title }), _jsx("span", { className: "shrink-0 text-sm font-normal opacity-80", children: labels.checks(lines.length) }), _jsx(ChevronRight, { className: "size-3.5 shrink-0 opacity-60 transition-transform group-open:rotate-90" })] }), _jsx("ul", { className: "mt-3 list-disc space-y-2 pl-10 marker:text-destructive/60", children: lines.map((r, i) => {
+                    const fixMark = r.jumpTo ? (_jsxs("button", { type: "button", onClick: () => onJump(r.jumpTo.tab, r.jumpTo.anchor), className: "group/fix inline-flex shrink-0 cursor-pointer items-center gap-0.5 whitespace-nowrap rounded px-1 text-xs font-medium text-destructive underline-offset-4 transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive/40", children: [r.severity === SEVERITY_ACTION_REQUIRED ? labels.choose : labels.fix, _jsx(ArrowRight, { className: "size-3 transition-transform group-hover/fix:translate-x-0.5" })] })) : null;
+                    return (_jsx("li", { className: "py-0.5 pl-1", children: _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "flex flex-wrap items-center gap-x-1.5", children: [r.title && _jsx("span", { className: "min-w-0 truncate font-medium text-foreground", children: r.title }), _jsx("span", { className: cn("text-sm text-muted-foreground", !r.title && "text-base"), children: r.text }), fixMark] }), r.numbers && (_jsx("span", { className: "block text-sm tabular-nums text-muted-foreground", children: r.numbers }))] }) }, `${r.field ?? "-"}-${i}`));
+                }) })] }));
+}

package/dist/pages/invoice-detail/SideBySide.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+export declare function SideBySide({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/pages/invoice-detail/SideBySide.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/class-names.js";
+export function SideBySide({ children, className }) {
+    return _jsx("div", { className: cn("grid gap-6 xl:grid-cols-2", className), children: children });
+}

package/dist/pages/invoice-detail/WorkflowHistoryList.d.ts

@@ -0,0 +1,23 @@
+import { InvoiceHistoryEntry } from "./pipeline-types";
+export interface WorkflowHistoryRow {
+    entry: InvoiceHistoryEntry;
+    from: string;
+    to: string;
+    qualifier: string | null;
+    comment: string | null;
+    durationMs: number;
+}
+export interface WorkflowHistoryLabels {
+    emptyText: string;
+    actorSystem: string;
+    actingAs: (name: string) => string;
+    reason: string;
+    arrivedLabel: string;
+    formatDateTime: (iso: string) => string;
+    durationShort: (value: number, unit: "minuten" | "stunden" | "tage") => string;
+}
+export declare function WorkflowHistoryList({ rows, arrivedAt, labels, }: {
+    rows: WorkflowHistoryRow[];
+    arrivedAt?: string | null;
+    labels: WorkflowHistoryLabels;
+}): import("react").JSX.Element;

package/dist/pages/invoice-detail/WorkflowHistoryList.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowUp } from "lucide-react";
+import { cn } from "../../lib/class-names.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/tooltip.js";
+function durationParts(ms) {
+    const minutes = ms / 60_000;
+    if (minutes < 60)
+        return { value: Math.max(1, Math.round(minutes)), unit: "minuten" };
+    const hours = minutes / 60;
+    if (hours < 24)
+        return { value: Math.round(hours), unit: "stunden" };
+    return { value: Math.round(hours / 24), unit: "tage" };
+}
+export function WorkflowHistoryList({ rows, arrivedAt, labels, }) {
+    if (rows.length === 0) {
+        return _jsx("p", { className: "text-base text-muted-foreground", children: labels.emptyText });
+    }
+    const display = [...rows].reverse();
+    return (_jsxs("ol", { children: [display.map(({ entry, to, qualifier, comment, durationMs }, i) => {
+                const newest = i === 0;
+                const duration = durationParts(durationMs);
+                const actingAs = entry.data?.handelnd_als;
+                const bad = entry.type === "ablehnung" || entry.type === "zahlung_fehlgeschlagen";
+                const chipTone = bad
+                    ? "bg-red-100 text-red-800"
+                    : entry.type === "rueckfrage"
+                        ? "bg-orange-100 text-orange-800"
+                        : "bg-violet-100 text-violet-800";
+                return (_jsxs("li", { className: "flex gap-2", children: [_jsxs("div", { className: "flex w-12 shrink-0 flex-col items-end pr-1", children: [_jsx("span", { className: "mt-1 h-3.5 shrink-0", "aria-hidden": "true" }), duration.value > 0 && (_jsx("span", { className: "flex flex-1 items-center whitespace-nowrap text-xs tabular-nums text-muted-foreground", children: labels.durationShort(duration.value, duration.unit) }))] }), _jsxs("div", { className: "flex w-5 shrink-0 flex-col items-center", children: [_jsx("span", { className: cn("mt-1 size-3.5 shrink-0 rounded-full", bad ? "bg-red-500" : "bg-brand", newest && "ring-2 ring-brand/60 ring-offset-2 ring-offset-card") }), _jsx(ArrowUp, { className: "mt-1.5 size-3.5 shrink-0 text-muted-foreground/70", "aria-hidden": "true" }), _jsx("span", { className: "-mt-1 mb-1 w-0 flex-1 border-l-2 border-muted-foreground/20" })] }), _jsxs("div", { className: "min-w-0 pb-5", children: [_jsxs("div", { className: "w-full flex items-center gap-2", children: [_jsx("p", { className: "text-base font-medium text-foreground", children: to }), _jsxs("p", { className: "mt-0.5 flex min-h-6 flex-wrap items-center gap-1.5 text-sm text-muted-foreground", children: [qualifier &&
+                                                    (comment ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { tabIndex: 0, className: cn("rounded-md px-1.5 py-0.5 text-xs font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2", chipTone), children: qualifier }) }), _jsx(TooltipContent, { side: "bottom", className: "max-w-[18rem]", children: comment })] })) : (_jsx("span", { className: cn("rounded-md px-1.5 py-0.5 text-xs font-medium", chipTone), children: qualifier }))), !qualifier && comment && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { tabIndex: 0, className: cn("rounded-md px-1.5 py-0.5 text-xs font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2", chipTone), children: labels.reason }) }), _jsx(TooltipContent, { side: "bottom", className: "max-w-[18rem]", children: comment })] }))] })] }), _jsxs("p", { className: "mt-0.5 text-sm text-muted-foreground", children: [entry.actor ?? labels.actorSystem, actingAs && ` · ${labels.actingAs(actingAs)}`, " \u00B7 ", labels.formatDateTime(entry.createdAt)] })] })] }, entry.id));
+            }), arrivedAt && (_jsxs("li", { className: "flex gap-2", children: [_jsx("div", { className: "w-12 shrink-0", "aria-hidden": "true" }), _jsx("div", { className: "flex w-5 shrink-0 flex-col items-center", children: _jsx("span", { className: "mt-1 size-3.5 shrink-0 rounded-full bg-brand" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-base font-medium text-foreground", children: labels.arrivedLabel }), _jsx("p", { className: "mt-0.5 text-sm text-muted-foreground", children: labels.formatDateTime(arrivedAt) })] })] }))] }));
+}

package/dist/pages/invoice-detail/WorkflowLadder.d.ts

@@ -0,0 +1,20 @@
+export interface LadderColors {
+    circle: string;
+    currentRing: string;
+    line: string;
+}
+export interface WorkflowLadderLabels {
+    navAriaLabel: string;
+    stepLabel: (step: string) => string;
+}
+export declare function WorkflowLadder({ steps, currentStep, since, actions, onAction, hint, labels, ladderColors, className, }: {
+    steps: readonly string[];
+    currentStep: number;
+    since?: string | null;
+    actions?: Map<string, unknown>;
+    onAction?: (step: string, action: unknown) => void;
+    hint?: (step: string) => string;
+    labels: WorkflowLadderLabels;
+    ladderColors: LadderColors;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/pages/invoice-detail/WorkflowLadder.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDown } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/tooltip.js";
+import { cn } from "../../lib/class-names.js";
+export function WorkflowLadder({ steps, currentStep, since, actions, onAction, hint, labels, ladderColors, className, }) {
+    const nextAction = steps.reduce((nearest, step, i) => (nearest == null && actions?.has(step) ? i : nearest), null);
+    return (_jsx("ol", { className: cn("flex w-full items-start px-2 sm:px-[4.5rem]", className), "aria-label": labels.navAriaLabel, children: steps.map((step, i) => {
+            const last = i === steps.length - 1;
+            const reached = currentStep >= 0 && i <= currentStep;
+            const current = i === currentStep;
+            const action = actions?.get(step) ?? null;
+            const dashed = nextAction != null && i >= currentStep && i < nextAction;
+            void dashed;
+            return (_jsxs("li", { className: cn("flex min-w-0 flex-col", last ? "shrink-0" : "flex-1"), "aria-current": current ? "step" : undefined, children: [_jsx("div", { className: "flex h-4 w-7 items-end justify-center", children: action && (_jsx(ArrowDown, { className: "size-3.5 animate-bounce text-brand motion-reduce:animate-none", "aria-hidden": "true" })) }), _jsxs("div", { className: "flex items-center", children: [action ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: () => onAction?.(step, action), "aria-label": hint?.(step) ?? labels.stepLabel(step), className: cn("relative grid size-7 shrink-0 cursor-pointer place-items-center rounded-full border-2 transition-colors before:absolute before:-inset-2 before:content-[''] hover:bg-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2", reached ? ladderColors.circle : "border-brand bg-background", current && ladderColors.currentRing) }) }), _jsx(TooltipContent, { side: "bottom", children: hint?.(step) ?? labels.stepLabel(step) })] })) : (_jsx("span", { className: cn("grid size-7 shrink-0 place-items-center rounded-full border-2", reached ? ladderColors.circle : "border-muted-foreground/30 bg-background", current && ladderColors.currentRing), "aria-hidden": "true" })), !last && (_jsx("span", { className: cn("h-0 min-w-0 flex-1 border-t-2", reached && i < currentStep ? ladderColors.line : "border-muted-foreground/20"), "aria-hidden": "true" }))] }), _jsxs("div", { className: "-ml-[4.5rem] mt-2 w-[9rem] text-center", children: [_jsx("span", { className: cn("block text-sm leading-tight", current ? "font-medium text-foreground" : "text-muted-foreground"), children: labels.stepLabel(step) }), current && since && (_jsx("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: since }))] })] }, step));
+        }) }));
+}

package/dist/pages/invoice-detail/history.d.ts

@@ -0,0 +1,23 @@
+import { InvoiceHistoryEntry } from "./pipeline-types";
+export interface HistoryConfig {
+    legacyActionIds: string[];
+    actionTargetStatus: Partial<Record<string, string>>;
+    approvalHistoryTypes: string[];
+}
+export interface HistoryFormat {
+    approvalActionLabelDe: (id: string) => string;
+    workflowLabelDe: (status: string) => string;
+    workflowOrder: readonly string[];
+}
+export interface HistoryLabels {
+    typeLabel: (type: string) => string;
+    stateLabel: (targetStatus: string) => string;
+    corrected: string;
+    queryAdditional: string;
+}
+export declare function historyTypeLabel(type: string, config: HistoryConfig, labels: HistoryLabels): string;
+export declare function historyComment(entry: InvoiceHistoryEntry, config: HistoryConfig, format: HistoryFormat): string | null;
+export declare function historyTargetStatus(entry: InvoiceHistoryEntry, config: HistoryConfig, format: HistoryFormat): string | null;
+export declare function historyStateLabel(entry: InvoiceHistoryEntry, config: HistoryConfig, format: HistoryFormat, labels: HistoryLabels): string;
+export declare function historyQualifier(entry: InvoiceHistoryEntry, labels: HistoryLabels): string | null;
+export declare function historyLines(entry: InvoiceHistoryEntry, config: HistoryConfig, format: HistoryFormat): string[];