@dainamite/billing 0.20.0 → 0.21.0

package/src/modules/billing/components/ManualPaymentDialog.tsx

@@ -0,0 +1,140 @@
+"use client"
+import * as React from 'react'
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Kbd, KbdShortcut } from '@open-mercato/ui/primitives/kbd'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { apiCallOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
+import { normalizeCrudServerError } from '@open-mercato/ui/backend/utils/serverErrors'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { AccountPicker } from './AccountPicker'
+
+/**
+ * Manual payment entry (Spec C). With an account the payment is matched and
+ * applied as credit to the account's open invoices; without one it stays
+ * unmatched. `billAccountId` pre-selects the account (account page).
+ */
+export function ManualPaymentDialog({
+  open,
+  onClose,
+  onCreated,
+  billAccountId,
+  currencyCode,
+}: {
+  open: boolean
+  onClose: () => void
+  onCreated: (paymentId: string) => void
+  billAccountId?: string
+  currencyCode?: string
+}) {
+  const t = useT()
+  const today = new Date().toISOString().slice(0, 10)
+  const [receivedAt, setReceivedAt] = React.useState(today)
+  const [amount, setAmount] = React.useState('')
+  const [currency, setCurrency] = React.useState(currencyCode ?? 'PLN')
+  const [reference, setReference] = React.useState('')
+  const [payerName, setPayerName] = React.useState('')
+  const [accountId, setAccountId] = React.useState(billAccountId ?? '')
+  const [saving, setSaving] = React.useState(false)
+
+  React.useEffect(() => {
+    if (!open) return
+    setReceivedAt(new Date().toISOString().slice(0, 10))
+    setAmount('')
+    setReference('')
+    setPayerName('')
+    setAccountId(billAccountId ?? '')
+    setCurrency(currencyCode ?? 'PLN')
+  }, [billAccountId, currencyCode, open])
+
+  const submit = React.useCallback(async () => {
+    const value = Number.parseFloat(amount)
+    if (!(value > 0) || saving) {
+      flash(t('billing.payments.manual.amount_invalid', 'Amount must be greater than 0'), 'error')
+      return
+    }
+    setSaving(true)
+    try {
+      const call = await apiCallOrThrow<{ paymentId: string }>('/api/billing/payments', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          receivedAt,
+          amount: value,
+          currencyCode: currency.trim().toUpperCase(),
+          ...(reference.trim() ? { reference: reference.trim() } : {}),
+          ...(payerName.trim() ? { payerName: payerName.trim() } : {}),
+          ...(accountId ? { billAccountId: accountId } : {}),
+        }),
+      })
+      flash(t('billing.payments.manual.saved', 'Payment recorded'), 'success')
+      onClose()
+      if (call.result?.paymentId) onCreated(call.result.paymentId)
+    } catch (err) {
+      flash(normalizeCrudServerError(err).message || t('billing.payments.manual.failed', 'Could not record the payment'), 'error')
+    } finally {
+      setSaving(false)
+    }
+  }, [accountId, amount, currency, onClose, onCreated, payerName, receivedAt, reference, saving, t])
+
+  return (
+    <Dialog open={open} onOpenChange={(next) => (!next ? onClose() : undefined)}>
+      <DialogContent
+        onKeyDown={(event) => {
+          if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+            event.preventDefault()
+            void submit()
+          }
+        }}
+      >
+        <DialogHeader>
+          <DialogTitle>{t('billing.payments.manual.title', 'Record payment')}</DialogTitle>
+        </DialogHeader>
+        <div className="grid grid-cols-2 gap-3 py-2 text-sm">
+          <label className="flex flex-col gap-1">
+            <span className="text-muted-foreground">{t('billing.payments.columns.received', 'Received')}</span>
+            <Input type="date" value={receivedAt} onChange={(e) => setReceivedAt(e.currentTarget.value)} />
+          </label>
+          <label className="flex flex-col gap-1">
+            <span className="text-muted-foreground">{t('billing.payments.columns.amount', 'Amount')}</span>
+            <Input type="number" min="0" step="0.01" value={amount} onChange={(e) => setAmount(e.currentTarget.value)} />
+          </label>
+          <label className="flex flex-col gap-1">
+            <span className="text-muted-foreground">{t('billing.payments.fields.currency', 'Currency')}</span>
+            <Input value={currency} maxLength={3} disabled={Boolean(currencyCode)} onChange={(e) => setCurrency(e.currentTarget.value)} />
+          </label>
+          <label className="flex flex-col gap-1">
+            <span className="text-muted-foreground">{t('billing.payments.columns.payer', 'Payer')}</span>
+            <Input value={payerName} onChange={(e) => setPayerName(e.currentTarget.value)} />
+          </label>
+          <label className="col-span-2 flex flex-col gap-1">
+            <span className="text-muted-foreground">{t('billing.payments.columns.reference', 'Reference')}</span>
+            <Input value={reference} onChange={(e) => setReference(e.currentTarget.value)} />
+          </label>
+          {!billAccountId ? (
+            <div className="col-span-2 flex flex-col gap-1">
+              <span className="text-muted-foreground">{t('billing.payments.fields.account_optional', 'Billing account (optional)')}</span>
+              <AccountPicker value={accountId} onChange={setAccountId} currencyCode={currency.trim().toUpperCase()} billingMode="postpaid" />
+            </div>
+          ) : null}
+        </div>
+        <DialogFooter>
+          <div className="flex w-full items-center justify-between gap-3">
+            <span className="text-xs text-muted-foreground">
+              <KbdShortcut keys={['Ctrl/⌘', 'Enter']} /> · <Kbd>Esc</Kbd>
+            </span>
+            <div className="flex items-center gap-2">
+              <Button type="button" variant="outline" onClick={onClose}>
+                {t('billing.common.cancel', 'Cancel')}
+              </Button>
+              <Button type="button" onClick={() => void submit()} disabled={saving}>
+                {t('billing.common.save', 'Save')}
+              </Button>
+            </div>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/modules/billing/components/MoneyInput.tsx

@@ -0,0 +1,26 @@
+"use client"
+import * as React from 'react'
+import { Input } from '@open-mercato/ui/primitives/input'
+
+export type MoneyInputProps = Omit<React.ComponentProps<typeof Input>, 'type'> & {
+  /** ISO currency code shown as a read-only suffix; nothing is shown when empty. */
+  currencyCode?: string | null
+}
+
+/**
+ * Number input with a read-only currency suffix (Spec F, F2). The currency
+ * comes from the parent Billing Account and is never editable here.
+ */
+export function MoneyInput({ currencyCode, className, ...inputProps }: MoneyInputProps) {
+  const code = currencyCode?.trim()
+  return (
+    <div className="relative">
+      <Input type="number" {...inputProps} className={code ? `pr-14 ${className ?? ''}` : className} />
+      {code ? (
+        <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-xs font-medium text-muted-foreground">
+          {code}
+        </span>
+      ) : null}
+    </div>
+  )
+}

package/src/modules/billing/components/PaymentUploadDialog.tsx

@@ -0,0 +1,148 @@
+"use client"
+import * as React from 'react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@open-mercato/ui/primitives/dialog'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Kbd, KbdShortcut } from '@open-mercato/ui/primitives/kbd'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+
+/**
+ * Bank CSV upload (Spec C). Posts the file to `/api/billing/payments/import`
+ * and shows the batch summary (counts per outcome + first row errors).
+ * Cmd/Ctrl+Enter uploads, Escape closes.
+ */
+
+export type ImportSummary = {
+  importId: string
+  fileName: string
+  rowCount: number
+  counts: Record<string, number>
+  errors: Array<{ row: number; message: string }>
+}
+
+const COUNT_KEYS = ['allocated', 'partially_allocated', 'matched', 'unmatched', 'duplicate', 'rejected'] as const
+
+export function PaymentUploadDialog({
+  open,
+  onClose,
+  onImported,
+}: {
+  open: boolean
+  onClose: () => void
+  onImported: (summary: ImportSummary) => void
+}) {
+  const t = useT()
+  const [file, setFile] = React.useState<File | null>(null)
+  const [uploading, setUploading] = React.useState(false)
+  const [summary, setSummary] = React.useState<ImportSummary | null>(null)
+
+  React.useEffect(() => {
+    if (open) {
+      setFile(null)
+      setSummary(null)
+    }
+  }, [open])
+
+  const countLabel: Record<(typeof COUNT_KEYS)[number], string> = {
+    allocated: t('billing.payments.import.counts.allocated', 'Allocated'),
+    partially_allocated: t('billing.payments.import.counts.partially_allocated', 'Partially allocated'),
+    matched: t('billing.payments.import.counts.matched', 'Matched (credit)'),
+    unmatched: t('billing.payments.import.counts.unmatched', 'Unmatched'),
+    duplicate: t('billing.payments.import.counts.duplicate', 'Duplicates'),
+    rejected: t('billing.payments.import.counts.rejected', 'Rejected rows'),
+  }
+
+  const upload = React.useCallback(async () => {
+    if (!file || uploading) return
+    setUploading(true)
+    try {
+      const form = new FormData()
+      form.set('file', file)
+      const call = await apiCall<ImportSummary & { error?: string }>('/api/billing/payments/import', { method: 'POST', body: form })
+      if (!call.ok || !call.result?.importId) {
+        flash(call.result?.error ?? t('billing.payments.import.failed', 'Import failed'), 'error')
+        return
+      }
+      setSummary(call.result)
+      onImported(call.result)
+    } finally {
+      setUploading(false)
+    }
+  }, [file, onImported, t, uploading])
+
+  return (
+    <Dialog open={open} onOpenChange={(next) => (!next ? onClose() : undefined)}>
+      <DialogContent
+        onKeyDown={(event) => {
+          if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+            event.preventDefault()
+            if (!summary) void upload()
+            else onClose()
+          }
+        }}
+      >
+        <DialogHeader>
+          <DialogTitle>{t('billing.payments.import.title', 'Upload bank payments')}</DialogTitle>
+          <DialogDescription>
+            {t(
+              'billing.payments.import.help',
+              'CSV with the header date,amount,currency,reference,payer_name,payer_account. Payments are matched by the invoice number in the reference.',
+            )}
+          </DialogDescription>
+        </DialogHeader>
+        {summary ? (
+          <div className="flex flex-col gap-3 text-sm">
+            <div className="text-muted-foreground">
+              {summary.fileName} · {t('billing.payments.import.rows', 'rows')}: {summary.rowCount}
+            </div>
+            <div className="grid grid-cols-2 gap-2">
+              {COUNT_KEYS.map((key) => (
+                <div key={key} className="flex items-center justify-between rounded-md border px-3 py-2">
+                  <span className="text-muted-foreground">{countLabel[key]}</span>
+                  <span className="font-medium tabular-nums">{summary.counts[key] ?? 0}</span>
+                </div>
+              ))}
+            </div>
+            {summary.errors.length > 0 ? (
+              <div className="max-h-40 overflow-auto rounded-md border p-2 text-xs">
+                {summary.errors.slice(0, 20).map((error) => (
+                  <div key={`${error.row}-${error.message}`}>
+                    {t('billing.payments.import.line', 'Line')} {error.row}: {error.message}
+                  </div>
+                ))}
+              </div>
+            ) : null}
+          </div>
+        ) : (
+          <Input type="file" accept=".csv,text/csv" onChange={(event) => setFile(event.currentTarget.files?.[0] ?? null)} />
+        )}
+        <DialogFooter>
+          <div className="flex w-full items-center justify-between gap-3">
+            <span className="text-xs text-muted-foreground">
+              <KbdShortcut keys={['Ctrl/⌘', 'Enter']} /> · <Kbd>Esc</Kbd>
+            </span>
+            <div className="flex items-center gap-2">
+              <Button type="button" variant="outline" onClick={onClose}>
+                {summary ? t('billing.common.close', 'Close') : t('billing.common.cancel', 'Cancel')}
+              </Button>
+              {!summary ? (
+                <Button type="button" onClick={() => void upload()} disabled={!file || uploading}>
+                  {uploading ? t('billing.payments.import.uploading', 'Uploading…') : t('billing.payments.import.action', 'Upload')}
+                </Button>
+              ) : null}
+            </div>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/modules/billing/components/PaymentsTable.tsx

@@ -0,0 +1,213 @@
+"use client"
+import * as React from 'react'
+import { useRouter } from 'next/navigation'
+import type { LegacyColumnDef as ColumnDef } from '@tanstack/react-table/legacy'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { FilterDef, FilterValues } from '@open-mercato/ui/backend/FilterBar'
+import { BillingDataTable as DataTable } from './BillingDataTable'
+import { Tag } from '@open-mercato/ui/primitives/tag'
+import { readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
+import { formatMoney } from './InvoicesTable'
+
+/**
+ * Billing payments table (Spec C) — shared by the Payments list page and the
+ * Payments section of a billing account. `billAccountId` / `importId` pin
+ * the list; row click opens the payment.
+ */
+
+export type PaymentRow = {
+  id: string
+  received_at: string
+  amount: string
+  currency_code: string
+  reference: string | null
+  payer_name: string | null
+  source: string
+  import_id: string | null
+  bill_account_id: string | null
+  bill_account_name: string | null
+  status: string
+  unallocated_amount: string
+  match_reason: string | null
+}
+
+type ListResponse = { items: PaymentRow[]; total: number; totalPages: number }
+
+export const PAYMENT_STATUS_VARIANT: Record<string, 'success' | 'warning' | 'error' | 'neutral' | 'info' | 'default'> = {
+  allocated: 'success',
+  partially_allocated: 'info',
+  matched: 'info',
+  unmatched: 'warning',
+  ignored: 'neutral',
+  converted_to_topup: 'success',
+}
+
+export function usePaymentLabels() {
+  const t = useT()
+  return React.useMemo(
+    () => ({
+      status: (status: string) =>
+        ({
+          unmatched: t('billing.payments.status.unmatched', 'Unmatched'),
+          matched: t('billing.payments.status.matched', 'Matched'),
+          partially_allocated: t('billing.payments.status.partially_allocated', 'Partially allocated'),
+          allocated: t('billing.payments.status.allocated', 'Allocated'),
+          ignored: t('billing.payments.status.ignored', 'Ignored'),
+          converted_to_topup: t('billing.payments.status.converted_to_topup', 'Converted to top-up'),
+        })[status] ?? status,
+      reason: (reason: string | null) =>
+        reason
+          ? ({
+              no_reference: t('billing.payments.reason.no_reference', 'No invoice number found'),
+              currency_mismatch: t('billing.payments.reason.currency_mismatch', 'Currency differs from the invoice'),
+              invoice_already_paid: t('billing.payments.reason.invoice_already_paid', 'Invoice already paid — kept as credit'),
+              prepaid_account: t('billing.payments.reason.prepaid_account', 'Prepaid account — convert to a top-up'),
+              manual: t('billing.payments.reason.manual', 'Entered or assigned manually'),
+            })[reason] ?? reason
+          : '—',
+    }),
+    [t],
+  )
+}
+
+export type PaymentsTableProps = {
+  title: string
+  tableId: string
+  billAccountId?: string
+  importId?: string
+  pageSize?: number
+  /** Bumped by the host to force a reload (e.g. after an upload). */
+  reloadKey?: number
+  actions?: React.ReactNode
+}
+
+export function PaymentsTable({ title, tableId, billAccountId, importId, pageSize = 25, reloadKey = 0, actions }: PaymentsTableProps) {
+  const t = useT()
+  const router = useRouter()
+  const labels = usePaymentLabels()
+  const [rows, setRows] = React.useState<PaymentRow[]>([])
+  const [page, setPage] = React.useState(1)
+  const [filters, setFilters] = React.useState<FilterValues>({})
+  const [search, setSearch] = React.useState('')
+  const [total, setTotal] = React.useState(0)
+  const [totalPages, setTotalPages] = React.useState(1)
+  const [loading, setLoading] = React.useState(true)
+  const [error, setError] = React.useState<string | null>(null)
+
+  const filterDefs = React.useMemo<FilterDef[]>(
+    () => [
+      {
+        id: 'status',
+        label: t('billing.payments.filters.status', 'Status'),
+        type: 'select',
+        options: ['unmatched', 'matched', 'partially_allocated', 'allocated', 'ignored', 'converted_to_topup'].map((value) => ({
+          value,
+          label: labels.status(value),
+        })),
+      },
+    ],
+    [labels, t],
+  )
+
+  const load = React.useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const params = new URLSearchParams({ page: String(page), pageSize: String(Math.min(pageSize, 100)) })
+      if (billAccountId) params.set('billAccountId', billAccountId)
+      if (importId) params.set('importId', importId)
+      if (search.trim()) params.set('search', search.trim())
+      if (typeof filters.status === 'string' && filters.status) params.set('status', filters.status)
+      const result = await readApiResultOrThrow<ListResponse>(`/api/billing/payments?${params.toString()}`)
+      setRows(result.items ?? [])
+      setTotal(result.total ?? 0)
+      setTotalPages(result.totalPages ?? 1)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : t('billing.payments.error.load', 'Could not load payments'))
+    } finally {
+      setLoading(false)
+    }
+    // reloadKey forces a refetch from the host.
+  }, [billAccountId, filters.status, importId, page, pageSize, search, t, reloadKey]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  React.useEffect(() => {
+    void load()
+  }, [load])
+
+  const columns = React.useMemo<ColumnDef<PaymentRow>[]>(() => {
+    const cols: ColumnDef<PaymentRow>[] = [
+      {
+        accessorKey: 'received_at',
+        header: t('billing.payments.columns.received', 'Received'),
+        cell: ({ row }) => row.original.received_at?.slice(0, 10) ?? '—',
+      },
+      {
+        accessorKey: 'amount',
+        header: t('billing.payments.columns.amount', 'Amount'),
+        cell: ({ row }) => formatMoney(row.original.amount, row.original.currency_code),
+      },
+      {
+        accessorKey: 'status',
+        header: t('billing.payments.columns.status', 'Status'),
+        cell: ({ row }) => <Tag variant={PAYMENT_STATUS_VARIANT[row.original.status] ?? 'default'}>{labels.status(row.original.status)}</Tag>,
+      },
+      {
+        accessorKey: 'unallocated_amount',
+        header: t('billing.payments.columns.unallocated', 'Unallocated'),
+        cell: ({ row }) => formatMoney(row.original.unallocated_amount, row.original.currency_code),
+      },
+      {
+        accessorKey: 'reference',
+        header: t('billing.payments.columns.reference', 'Reference'),
+        cell: ({ row }) => row.original.reference ?? '—',
+        meta: { truncate: true, maxWidth: '260px' },
+      },
+      {
+        accessorKey: 'payer_name',
+        header: t('billing.payments.columns.payer', 'Payer'),
+        cell: ({ row }) => row.original.payer_name ?? '—',
+        meta: { truncate: true, maxWidth: '180px' },
+      },
+    ]
+    if (!billAccountId) {
+      cols.splice(3, 0, {
+        accessorKey: 'bill_account_name',
+        header: t('billing.payments.columns.account', 'Account'),
+        cell: ({ row }) => row.original.bill_account_name ?? '—',
+        meta: { truncate: true, maxWidth: '200px' },
+      })
+    }
+    return cols
+  }, [billAccountId, labels, t])
+
+  return (
+    <DataTable
+      title={title}
+      actions={actions}
+      refreshButton={{ label: t('billing.common.refresh', 'Refresh'), onRefresh: load, isRefreshing: loading }}
+      perspective={{ tableId }}
+      columns={columns}
+      data={rows}
+      error={error}
+      emptyState={t('billing.payments.empty', 'No payments yet.')}
+      isLoading={loading}
+      onRowClick={(row) => router.push(`/backend/billing/payments/${encodeURIComponent(row.id)}`)}
+      pagination={{ page, pageSize, total, totalPages, onPageChange: setPage }}
+      filters={filterDefs}
+      filterValues={filters}
+      onFiltersApply={(next) => {
+        setPage(1)
+        setFilters(next)
+      }}
+      onFiltersClear={() => {
+        setPage(1)
+        setFilters({})
+      }}
+      searchValue={search}
+      onSearchChange={(next) => {
+        setPage(1)
+        setSearch(next)
+      }}
+    />
+  )
+}

package/src/modules/billing/components/PostRunDraftsButton.tsx

@@ -0,0 +1,129 @@
+"use client"
+import * as React from 'react'
+import { Send } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'
+import { apiCallOrThrow, readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
+import { normalizeCrudServerError } from '@open-mercato/ui/backend/utils/serverErrors'
+
+/**
+ * "Post invoices" for a REAL Bill Run: posts every draft invoice the run
+ * wrote. Batches through `POST /api/billing/runs/{id}/post-drafts` (cursor
+ * paging) so large runs never become one long request, showing progress on
+ * the button. Renders nothing when the run has no drafts left.
+ */
+
+type BatchResult = {
+  posted: number
+  failed: Array<{ invoiceId: string; number: string; error: string; code: string | null }>
+  nextCursor: string | null
+  remaining: number
+  stoppedReason: string | null
+}
+
+const BATCH_SIZE = 25
+
+export function PostRunDraftsButton({ runId, onPosted }: { runId: string; onPosted: () => void }) {
+  const t = useT()
+  const { confirm, ConfirmDialogElement } = useConfirmDialog()
+  const [draftCount, setDraftCount] = React.useState<number | null>(null)
+  const [progress, setProgress] = React.useState<{ done: number; total: number } | null>(null)
+
+  const loadCount = React.useCallback(async () => {
+    try {
+      const params = new URLSearchParams({ billRunId: runId, status: 'draft', testRun: 'false', pageSize: '1' })
+      const result = await readApiResultOrThrow<{ total?: number }>(`/api/billing/invoices?${params.toString()}`)
+      setDraftCount(result.total ?? 0)
+    } catch {
+      setDraftCount(0)
+    }
+  }, [runId])
+
+  React.useEffect(() => {
+    void loadCount()
+  }, [loadCount])
+
+  const handlePost = React.useCallback(async () => {
+    if (!draftCount) return
+    const ok = await confirm({
+      title: t('billing.runs.post.confirm.title', 'Post the draft invoices of this run?'),
+      text: `${t(
+        'billing.runs.post.confirm.text',
+        'Each draft gets its final number, due date and frozen PDF; invoices set to auto-send are emailed. Posted invoices cannot be edited. Drafts:',
+      )} ${draftCount}`,
+      confirmText: t('billing.runs.post.confirm.button', 'Post invoices'),
+    })
+    if (!ok) return
+    const total = draftCount
+    let done = 0
+    let posted = 0
+    const failed: BatchResult['failed'] = []
+    let cursor: string | null = null
+    let stoppedReason: string | null = null
+    setProgress({ done, total })
+    try {
+      // Bounded by the draft count: every batch advances the cursor or stops.
+      for (let guard = 0; guard <= Math.ceil(total / BATCH_SIZE) + 1; guard += 1) {
+        const call: { result?: BatchResult | null } = await apiCallOrThrow<BatchResult>(
+          `/api/billing/runs/${encodeURIComponent(runId)}/post-drafts`,
+          {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ limit: BATCH_SIZE, ...(cursor ? { afterInvoiceId: cursor } : {}) }),
+          },
+        )
+        const batch = call.result
+        if (!batch) break
+        posted += batch.posted
+        failed.push(...batch.failed)
+        done += batch.posted + batch.failed.length
+        setProgress({ done: Math.min(done, total), total })
+        if (batch.stoppedReason) {
+          stoppedReason = batch.stoppedReason
+          break
+        }
+        if (batch.remaining === 0 || !batch.nextCursor || batch.nextCursor === cursor) break
+        cursor = batch.nextCursor
+      }
+      if (stoppedReason === 'billing.settings.incomplete') {
+        flash(
+          t('billing.invoices.post.settings_incomplete', 'Fill in the seller details in Settings → Billing before posting invoices.'),
+          'error',
+        )
+      } else if (failed.length > 0) {
+        const sample = failed
+          .slice(0, 3)
+          .map((f) => `${f.number}: ${f.error}`)
+          .join('; ')
+        flash(
+          `${t('billing.runs.post.partial', 'Posted')} ${posted} · ${t('billing.runs.post.failed', 'failed')} ${failed.length} — ${sample}`,
+          'warning',
+        )
+      } else {
+        flash(`${t('billing.runs.post.success', 'Invoices posted')}: ${posted}`, 'success')
+      }
+    } catch (err) {
+      const { message } = normalizeCrudServerError(err)
+      flash(message || t('billing.runs.post.error', 'Posting failed'), 'error')
+    } finally {
+      setProgress(null)
+      void loadCount()
+      onPosted()
+    }
+  }, [confirm, draftCount, onPosted, runId, t])
+
+  if (!draftCount && !progress) return ConfirmDialogElement
+  return (
+    <>
+      <Button type="button" onClick={() => void handlePost()} disabled={progress !== null}>
+        <Send size={16} />
+        {progress
+          ? `${t('billing.runs.post.in_progress', 'Posting…')} ${progress.done}/${progress.total}`
+          : `${t('billing.runs.post.action', 'Post invoices')} (${draftCount})`}
+      </Button>
+      {ConfirmDialogElement}
+    </>
+  )
+}