@dainamite/billing 0.20.0 → 0.21.0

package/src/modules/billing/commands/settings.ts

@@ -0,0 +1,77 @@
+import type { EntityManager } from '@mikro-orm/postgresql'
+import type { CommandHandler, CommandRuntimeContext } from '@open-mercato/shared/lib/commands/types'
+import { registerCommand } from '@open-mercato/shared/lib/commands'
+import { ensureOrganizationScope, ensureTenantScope } from '@open-mercato/shared/lib/commands/scope'
+import { billingSettingsUpdateSchema, type BillingSettingsUpdateInput } from '../data/validators'
+import { getBillingSettings, serializeBillingSettings, taxRateColumn } from '../lib/billingSettings'
+
+/**
+ * `billing.settings.update` — edits the organization's billing settings
+ * (Spec 0: prepaid defaults + document number masks; Spec B: seller,
+ * payment and document fields). The row always exists (lazily created), so this is a partial
+ * update of one row per organization. Masks are validated by the schema.
+ */
+
+function getEm(ctx: CommandRuntimeContext): EntityManager {
+  return (ctx.container.resolve('em') as EntityManager).fork()
+}
+
+function money4(value: number): string {
+  return (Math.round(value * 10000) / 10000).toFixed(4)
+}
+
+const updateSettingsCommand: CommandHandler<
+  BillingSettingsUpdateInput,
+  ReturnType<typeof serializeBillingSettings>
+> = {
+  id: 'billing.settings.update',
+
+  async execute(rawInput, ctx) {
+    const parsed = billingSettingsUpdateSchema.parse(rawInput)
+    ensureTenantScope(ctx, parsed.tenantId)
+    ensureOrganizationScope(ctx, parsed.organizationId)
+
+    const em = getEm(ctx)
+    const settings = await getBillingSettings(em, {
+      tenantId: parsed.tenantId,
+      organizationId: parsed.organizationId,
+    })
+    if (parsed.lowBalanceThresholdDefault !== undefined) {
+      settings.lowBalanceThresholdDefault = money4(parsed.lowBalanceThresholdDefault)
+    }
+    if (parsed.nearLimitBufferDefault !== undefined) {
+      settings.nearLimitBufferDefault = money4(parsed.nearLimitBufferDefault)
+    }
+    if (parsed.statementEnabled !== undefined) settings.statementEnabled = parsed.statementEnabled
+    if (parsed.topupTaxRate !== undefined) settings.topupTaxRate = parsed.topupTaxRate.toFixed(4)
+    if (parsed.topupProvider !== undefined) settings.topupProvider = parsed.topupProvider
+    if (parsed.prepaidTaxPoint !== undefined) settings.prepaidTaxPoint = parsed.prepaidTaxPoint
+    if (parsed.numberMasks !== undefined) {
+      settings.numberMasks = { ...(settings.numberMasks ?? {}), ...stripUndefined(parsed.numberMasks) }
+    }
+    // Spec B — seller / payment / document fields. `null` clears a field.
+    if (parsed.legalName !== undefined) settings.legalName = parsed.legalName
+    if (parsed.sellerAddress !== undefined) settings.sellerAddress = parsed.sellerAddress
+    if (parsed.taxId !== undefined) settings.taxId = parsed.taxId
+    if (parsed.bankName !== undefined) settings.bankName = parsed.bankName
+    if (parsed.iban !== undefined) settings.iban = parsed.iban
+    if (parsed.bic !== undefined) settings.bic = parsed.bic
+    if (parsed.invoiceFooter !== undefined) settings.invoiceFooter = parsed.invoiceFooter
+    if (parsed.logoAttachmentId !== undefined) settings.logoAttachmentId = parsed.logoAttachmentId
+    if (parsed.defaultPaymentTermsDays !== undefined) settings.defaultPaymentTermsDays = parsed.defaultPaymentTermsDays
+    if (parsed.defaultTaxRate !== undefined) settings.defaultTaxRate = taxRateColumn(parsed.defaultTaxRate)
+    settings.updatedAt = new Date()
+    await em.flush()
+    return serializeBillingSettings(settings)
+  },
+}
+
+function stripUndefined(masks: Record<string, string | undefined>): Record<string, string> {
+  const out: Record<string, string> = {}
+  for (const [key, value] of Object.entries(masks)) if (value !== undefined) out[key] = value
+  return out
+}
+
+registerCommand(updateSettingsCommand)
+
+export { updateSettingsCommand }

package/src/modules/billing/commands/topups.ts

@@ -9,7 +9,7 @@ import {
 import { emitCrudSideEffects } from '@open-mercato/shared/lib/commands/helpers'
 import { CrudHttpError } from '@open-mercato/shared/lib/crud/errors'
 import type { DataEngine } from '@open-mercato/shared/lib/data/engine'
-import type { PaymentGatewayService } from '@open-mercato/core/modules/payment_gateways/lib/gateway-service'
+import { resolvePaymentGateway } from '../lib/paymentGateway'
 import { BillingAccount, BillingTopup } from '../data/entities'
 import { billingEntityIds } from '../data/entityIds'
 import {
@@ -98,7 +98,17 @@ const createTopupCommand: CommandHandler<BillingTopupCreateInput, CreateTopupRes
       }
     }
 
-    const providerKey = parsed.providerKey ?? (await getTopupProvider(em))
+    // E-D1: the gateway is optional. Check before persisting anything so an
+    // install without `payment_gateways` never leaves a dangling pending top-up.
+    const gateway = resolvePaymentGateway(ctx.container as never)
+    if (!gateway) {
+      throw new CrudHttpError(501, {
+        error: 'Online top-ups need the payment gateways module, which is not installed',
+        code: 'billing.topup.gateway_unavailable',
+      })
+    }
+
+    const providerKey = parsed.providerKey ?? (await getTopupProvider(em, { tenantId: parsed.tenantId, organizationId: parsed.organizationId }))
     const paymentId = randomUUID()
     const now = new Date()
     const topup = em.create(BillingTopup, {
@@ -124,7 +134,6 @@ const createTopupCommand: CommandHandler<BillingTopupCreateInput, CreateTopupRes
     // Open the gateway session. captureMethod 'automatic' so a successful
     // checkout fires `payment.captured` directly (our capture subscriber
     // credits the balance + issues the receipt).
-    const gateway = ctx.container.resolve('paymentGatewayService') as PaymentGatewayService
     const { transaction, session } = await gateway.createPaymentSession({
       providerKey,
       paymentId,

package/src/modules/billing/commands/transactions.ts

@@ -84,9 +84,9 @@ const adjustTransactionCommand: CommandHandler<BillingTransactionAdjustInput, Ad
     })
     const threshold = resolveLowBalanceThreshold(
       balanceRow?.lowBalanceThreshold ?? null,
-      await getLowBalanceThresholdDefault(em),
+      await getLowBalanceThresholdDefault(em, { tenantId: account.tenantId, organizationId: account.organizationId }),
     )
-    const nearLimitBuffer = await getNearLimitBufferDefault(em)
+    const nearLimitBuffer = await getNearLimitBufferDefault(em, { tenantId: account.tenantId, organizationId: account.organizationId })
     const userId = (ctx.auth?.sub as string | undefined) ?? null
 
     const outcome = await em.transactional(async (tem) =>

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

@@ -10,10 +10,24 @@ import {
   SelectValue,
 } from '@open-mercato/ui/primitives/select'
 import { Switch } from '@open-mercato/ui/primitives/switch'
+import { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'
+import { Building2, User } from 'lucide-react'
 import { Kbd, KbdShortcut } from '@open-mercato/ui/primitives/kbd'
 import { ComboboxInput, type ComboboxOption } from '@open-mercato/ui/backend/inputs'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { CustomerKind } from '../data/validators'
+import {
+  applyCustomerPrefill,
+  customerEndpoint,
+  extractItems,
+  mapPrimaryAddress,
+  toCustomerSummary,
+  type CustomerSummary,
+  type PrefillAddress,
+} from '../lib/customerLookup'
+import { DEFAULT_INVOICE_LANGUAGE, SUPPORTED_INVOICE_LANGUAGES } from '../lib/invoiceLanguages'
+import { fetchCustomerAddressRows } from './customerNames'
 
 /**
  * Shared form for Billing Account create + edit.
@@ -33,10 +47,17 @@ import { useT } from '@open-mercato/shared/lib/i18n/context'
  * disables `customerId` and `currencyCode` per the spec
  * ("immutable per spec — create a new account if the customer FK
  * changes" — see `billingAccountUpdateSchema`).
+ *
+ * Spec E (B2C): the customer can be a company or a person
+ * (`customerKind`, immutable after create). Picking a customer prefills
+ * name / invoice email / invoice address — only into empty fields, and a
+ * prefill that the operator has not touched is rolled back when they pick a
+ * different customer or switch kind.
  */
 
 export type AccountFormValues = {
   customerId: string
+  customerKind: CustomerKind
   name: string
   currencyCode: string
   billCycle: 'weekly' | 'monthly' | 'quarterly' | 'annually'
@@ -58,6 +79,9 @@ export type AccountFormValues = {
   creditLimit: string
   // Prepaid-only initial low-balance threshold for the balance row.
   lowBalanceThreshold: string
+  // Spec B — blank = organization default terms.
+  paymentTermsDays: string
+  autoSendInvoice: boolean
 }
 
 export type AccountFormProps = {
@@ -70,12 +94,13 @@ export type AccountFormProps = {
 
 const EMPTY_VALUES: AccountFormValues = {
   customerId: '',
+  customerKind: 'company',
   name: '',
   currencyCode: 'EUR',
   billCycle: 'monthly',
   billCycleAnchor: '1',
   invoiceEmail: '',
-  invoiceLanguage: 'en',
+  invoiceLanguage: DEFAULT_INVOICE_LANGUAGE,
   taxId: '',
   invoiceAddress: {
     line1: '',
@@ -89,6 +114,8 @@ const EMPTY_VALUES: AccountFormValues = {
   billingMode: 'postpaid',
   creditLimit: '0',
   lowBalanceThreshold: '',
+  paymentTermsDays: '',
+  autoSendInvoice: false,
 }
 
 function todayIso(): string {
@@ -120,49 +147,95 @@ export function AccountForm({
   const [error, setError] = React.useState<string | null>(null)
   const isEdit = mode === 'edit'
 
-  // Label cache for the customer combobox — populated as the user searches,
-  // so the picker can render "Acme Telecom" after selection instead of the
-  // raw UUID we send to the API.
-  const customerLabelCacheRef = React.useRef<Map<string, ComboboxOption>>(new Map())
+  // Customer cache for the combobox — populated as the user searches, so the
+  // picker can render "Acme Telecom" after selection instead of the raw UUID
+  // we send to the API, and so prefill has the name + email at hand.
+  const customerCacheRef = React.useRef<Map<string, CustomerSummary>>(new Map())
+  // What the last prefill wrote — used to roll it back (only where the
+  // operator has not edited it since) when the customer or kind changes.
+  const prefilledRef = React.useRef<{ name?: string; invoiceEmail?: string; address?: PrefillAddress }>({})
 
   const loadCustomerOptions = React.useCallback(
     async (query?: string): Promise<ComboboxOption[]> => {
       const params = new URLSearchParams({ page: '1', pageSize: '20' })
       const q = (query ?? '').trim()
       if (q) params.set('search', q)
-      const call = await apiCall<unknown>(`/api/customers/companies?${params.toString()}`)
+      const call = await apiCall<unknown>(`${customerEndpoint(values.customerKind)}?${params.toString()}`)
       if (!call.ok || call.result == null) return []
-      const raw = call.result as { items?: unknown } | unknown[]
-      const items: Array<Record<string, unknown>> = Array.isArray(raw)
-        ? (raw as Array<Record<string, unknown>>)
-        : Array.isArray((raw as { items?: unknown }).items)
-          ? ((raw as { items: unknown[] }).items as Array<Record<string, unknown>>)
-          : []
       const options: ComboboxOption[] = []
-      for (const c of items) {
-        const id = typeof c.id === 'string' ? c.id : c.id != null ? String(c.id) : ''
-        if (!id) continue
-        const label = String(c.display_name ?? c.displayName ?? c.name ?? id)
-        const emailRaw = c.primary_email ?? c.email
-        const description = typeof emailRaw === 'string' && emailRaw ? emailRaw : null
-        const opt: ComboboxOption = { value: id, label, description }
-        customerLabelCacheRef.current.set(id, opt)
-        options.push(opt)
+      for (const raw of extractItems(call.result)) {
+        const summary = toCustomerSummary(raw)
+        if (!summary) continue
+        customerCacheRef.current.set(summary.id, summary)
+        options.push({ value: summary.id, label: summary.name, description: summary.email })
       }
       return options
     },
-    [],
+    [values.customerKind],
   )
 
   const resolveCustomerLabel = React.useCallback(
-    (id: string) => customerLabelCacheRef.current.get(id)?.label ?? id,
+    (id: string) => customerCacheRef.current.get(id)?.name ?? id,
     [],
   )
   const resolveCustomerDescription = React.useCallback(
-    (id: string) => customerLabelCacheRef.current.get(id)?.description ?? null,
+    (id: string) => customerCacheRef.current.get(id)?.email ?? null,
     [],
   )
 
+  // Pure: strip fields that still hold the last prefill (untouched by the
+  // operator). Kept free of side effects so it is safe inside state updaters.
+  const withoutUntouchedPrefill = React.useCallback((prev: AccountFormValues): AccountFormValues => {
+    const filled = prefilledRef.current
+    let next = prev
+    if (filled.name !== undefined && prev.name === filled.name) next = { ...next, name: '' }
+    if (filled.invoiceEmail !== undefined && prev.invoiceEmail === filled.invoiceEmail) {
+      next = { ...next, invoiceEmail: '' }
+    }
+    if (filled.address && JSON.stringify(prev.invoiceAddress) === JSON.stringify(filled.address)) {
+      next = { ...next, invoiceAddress: { ...EMPTY_VALUES.invoiceAddress } }
+    }
+    return next
+  }, [])
+
+  const handleKindChange = React.useCallback(
+    (next: string) => {
+      const kind: CustomerKind = next === 'person' ? 'person' : 'company'
+      if (values.customerKind === kind) return
+      const reset = { ...withoutUntouchedPrefill(values), customerKind: kind, customerId: '' }
+      prefilledRef.current = {}
+      setValues(reset)
+    },
+    [values, withoutUntouchedPrefill],
+  )
+
+  const handleCustomerChange = React.useCallback(
+    (customerId: string) => {
+      const summary = customerCacheRef.current.get(customerId) ?? null
+      const base = { ...withoutUntouchedPrefill(values), customerId }
+      const filled = applyCustomerPrefill(base, summary, null)
+      prefilledRef.current = {
+        ...(filled.name !== base.name ? { name: filled.name } : {}),
+        ...(filled.invoiceEmail !== base.invoiceEmail ? { invoiceEmail: filled.invoiceEmail } : {}),
+      }
+      setValues(filled)
+      if (!customerId) return
+      void fetchCustomerAddressRows(customerId).then((rows) => {
+        const address = mapPrimaryAddress(rows)
+        if (!address) return
+        setValues((prev) => {
+          // Ignore a late response for a customer the operator already left.
+          if (prev.customerId !== customerId) return prev
+          return applyCustomerPrefill(prev, null, address)
+        })
+        // Record what we wrote; harmless if the updater above skipped (the
+        // rollback compares values, so a non-matching address is kept).
+        prefilledRef.current = { ...prefilledRef.current, address }
+      })
+    },
+    [values, withoutUntouchedPrefill],
+  )
+
   // Reset when the parent swaps `initial` (e.g. after loading the edit row).
   const initialKey = React.useMemo(
     () => JSON.stringify(initial ?? null),
@@ -245,48 +318,73 @@ export function AccountForm({
       if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
         event.preventDefault()
         void handleSubmit()
+      } else if (event.key === 'Escape') {
+        event.preventDefault()
+        onCancel()
       }
     },
-    [handleSubmit],
+    [handleSubmit, onCancel],
   )
 
   return (
     <div className="rounded-lg border border-border bg-card p-6" onKeyDown={handleKeyDown}>
       <div className="grid grid-cols-2 gap-4">
+        <div className="flex flex-col gap-1 text-sm col-span-2">
+          <span className="text-muted-foreground">
+            {t('billing.accounts.form.customer_kind', 'Customer type')}
+          </span>
+          {isEdit ? (
+            <span className="inline-flex items-center gap-2">
+              {values.customerKind === 'person' ? <User size={16} /> : <Building2 size={16} />}
+              {values.customerKind === 'person'
+                ? t('billing.accounts.kind.person', 'Person')
+                : t('billing.accounts.kind.company', 'Company')}
+            </span>
+          ) : (
+            <SegmentedControl
+              value={values.customerKind}
+              onValueChange={handleKindChange}
+              aria-label={t('billing.accounts.form.customer_kind', 'Customer type')}
+              className="self-start"
+            >
+              <SegmentedControlItem value="company">
+                <Building2 size={14} />
+                {t('billing.accounts.kind.company', 'Company')}
+              </SegmentedControlItem>
+              <SegmentedControlItem value="person">
+                <User size={14} />
+                {t('billing.accounts.kind.person', 'Person')}
+              </SegmentedControlItem>
+            </SegmentedControl>
+          )}
+        </div>
+
         <label className="flex flex-col gap-1 text-sm">
           <span className="text-muted-foreground">
             {isEdit
               ? t('billing.accounts.form.customer_id', 'Customer ID')
-              : t('billing.accounts.form.customer', 'Customer')}
+              : values.customerKind === 'person'
+                ? t('billing.accounts.form.customer.person', 'Person')
+                : t('billing.accounts.form.customer.company', 'Company')}
             {!isEdit ? <span className="text-destructive"> *</span> : null}
           </span>
           {isEdit ? (
             <Input value={values.customerId} disabled />
           ) : (
             <ComboboxInput
+              // Re-mount on kind switch so cached suggestions from the other
+              // collection never leak into this one.
+              key={values.customerKind}
               value={values.customerId}
-              onChange={(next) => {
-                setValues((prev) => {
-                  const customerLabel = customerLabelCacheRef.current.get(next)?.label ?? ''
-                  // Auto-fill Name with the customer's display name on the first
-                  // pick. We leave it alone if the operator has already typed
-                  // something — one customer can have multiple billing accounts
-                  // (e.g. "Acme — production" / "Acme — staging").
-                  const shouldFillName = customerLabel && !prev.name.trim()
-                  return {
-                    ...prev,
-                    customerId: next,
-                    name: shouldFillName ? customerLabel : prev.name,
-                  }
-                })
-              }}
+              onChange={handleCustomerChange}
               loadSuggestions={loadCustomerOptions}
               resolveLabel={resolveCustomerLabel}
               resolveDescription={resolveCustomerDescription}
-              placeholder={t(
-                'billing.accounts.form.customer.placeholder',
-                'Search customers by name or email…',
-              )}
+              placeholder={
+                values.customerKind === 'person'
+                  ? t('billing.accounts.form.customer.placeholder_person', 'Search people by name or email…')
+                  : t('billing.accounts.form.customer.placeholder', 'Search customers by name or email…')
+              }
               allowCustomValues={false}
             />
           )}
@@ -294,7 +392,14 @@ export function AccountForm({
             <span className="text-xs text-muted-foreground">
               {t('billing.accounts.form.customer_id.locked', 'Immutable — create a new account to re-link the customer.')}
             </span>
-          ) : null}
+          ) : (
+            <span className="text-xs text-muted-foreground">
+              {t(
+                'billing.accounts.form.customer.prefill_hint',
+                'Name, invoice email and address are prefilled from the customer record when empty.',
+              )}
+            </span>
+          )}
         </label>
 
         <label className="flex flex-col gap-1 text-sm">
@@ -399,15 +504,23 @@ export function AccountForm({
 
         <label className="flex flex-col gap-1 text-sm">
           <span className="text-muted-foreground">
-            {t('billing.accounts.form.invoice_language', 'Invoice language (ISO 639-1)')}
+            {t('billing.accounts.form.invoice_language', 'Invoice language')}
           </span>
-          <Input
+          <Select
             value={values.invoiceLanguage}
-            maxLength={5}
-            onChange={(event) =>
-              set('invoiceLanguage', event.currentTarget.value.toLowerCase())
-            }
-          />
+            onValueChange={(next) => set('invoiceLanguage', next)}
+          >
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {SUPPORTED_INVOICE_LANGUAGES.map((language) => (
+                <SelectItem key={language.code} value={language.code}>
+                  {language.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </label>
 
         <label className="flex flex-col gap-1 text-sm col-span-2">
@@ -520,6 +633,39 @@ export function AccountForm({
           />
         </label>
 
+        <label className="flex flex-col gap-1 text-sm">
+          <span className="text-muted-foreground">
+            {t('billing.accounts.form.payment_terms', 'Payment terms (days)')}
+          </span>
+          <Input
+            type="number"
+            min="0"
+            max="365"
+            step="1"
+            value={values.paymentTermsDays}
+            placeholder={t('billing.accounts.form.payment_terms.hint', 'Blank = organization default')}
+            onChange={(event) => set('paymentTermsDays', event.currentTarget.value)}
+          />
+        </label>
+
+        <div className="flex items-center justify-between gap-3 col-span-2">
+          <div>
+            <div className="text-sm font-medium">
+              {t('billing.accounts.form.auto_send', 'Email invoices automatically')}
+            </div>
+            <div className="text-xs text-muted-foreground">
+              {t(
+                'billing.accounts.form.auto_send.help',
+                'Each posted invoice is emailed as a PDF to the invoice email.',
+              )}
+            </div>
+          </div>
+          <Switch
+            checked={values.autoSendInvoice}
+            onCheckedChange={(next) => set('autoSendInvoice', next)}
+          />
+        </div>
+
         {values.billingMode === 'prepaid' ? (
           <label className="flex flex-col gap-1 text-sm">
             <span className="text-muted-foreground">

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

@@ -0,0 +1,75 @@
+"use client"
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
+import { Stat, StatCard } from './DetailFields'
+import { InvoicesTable, formatMoney } from './InvoicesTable'
+
+/**
+ * Account Invoices section (Spec B): receivables summary cards + the
+ * account's billing documents. Self-contained so Spec E's account workspace
+ * can drop it into its Invoices tab unchanged.
+ */
+
+type AccountSummary = {
+  currency_code: string
+  open_amount: string
+  overdue_amount: string
+  overdue_count: number
+  credit_amount: string
+}
+
+export function AccountInvoicesSection({
+  accountId,
+  showSummary = true,
+}: {
+  accountId: string
+  /** False inside the account workspace, whose header already shows these figures. */
+  showSummary?: boolean
+}) {
+  const t = useT()
+  const [summary, setSummary] = React.useState<AccountSummary | null>(null)
+
+  React.useEffect(() => {
+    if (!showSummary) return
+    let cancelled = false
+    readApiResultOrThrow<AccountSummary>(`/api/billing/accounts/${encodeURIComponent(accountId)}/summary`)
+      .then((result) => {
+        if (!cancelled) setSummary(result)
+      })
+      .catch(() => {
+        // Summary is informational; the invoices table reports its own errors.
+        if (!cancelled) setSummary(null)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [accountId, showSummary])
+
+  return (
+    <div className={showSummary ? 'mt-6 space-y-3' : 'space-y-3'}>
+      {showSummary && summary ? (
+        <StatCard>
+          <Stat
+            label={t('billing.accounts.summary.open', 'Open receivables')}
+            value={formatMoney(summary.open_amount, summary.currency_code)}
+          />
+          <Stat
+            label={t('billing.accounts.summary.overdue', 'Overdue')}
+            value={`${formatMoney(summary.overdue_amount, summary.currency_code)} (${summary.overdue_count})`}
+          />
+          <Stat
+            label={t('billing.accounts.summary.credit', 'Unapplied credit')}
+            value={formatMoney(summary.credit_amount, summary.currency_code)}
+          />
+        </StatCard>
+      ) : null}
+      <InvoicesTable
+        title={t('billing.accounts.detail.invoices', 'Invoices')}
+        billAccountId={accountId}
+        tableId="billing-account-invoices"
+        pageSize={10}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,42 @@
+"use client"
+import * as React from 'react'
+import { useRouter } from 'next/navigation'
+import { Plus } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { PaymentsTable } from './PaymentsTable'
+import { ManualPaymentDialog } from './ManualPaymentDialog'
+
+/**
+ * Account Payments section (Spec C): the account's payments plus "Record
+ * payment" (pre-filled account and currency). Self-contained so Spec E's
+ * Payments tab can reuse it.
+ */
+export function AccountPaymentsSection({ accountId, currencyCode }: { accountId: string; currencyCode: string }) {
+  const t = useT()
+  const router = useRouter()
+  const [open, setOpen] = React.useState(false)
+  return (
+    <div className="mt-6">
+      <PaymentsTable
+        title={t('billing.accounts.detail.payments', 'Payments')}
+        tableId="billing-account-payments"
+        billAccountId={accountId}
+        pageSize={10}
+        actions={
+          <Button type="button" variant="outline" onClick={() => setOpen(true)}>
+            <Plus size={16} />
+            {t('billing.payments.manual.action', 'Record payment')}
+          </Button>
+        }
+      />
+      <ManualPaymentDialog
+        open={open}
+        onClose={() => setOpen(false)}
+        billAccountId={accountId}
+        currencyCode={currencyCode}
+        onCreated={(paymentId) => router.push(`/backend/billing/payments/${encodeURIComponent(paymentId)}`)}
+      />
+    </div>
+  )
+}