@dainamite/billing 0.20.0 → 0.22.0

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

@@ -4,11 +4,11 @@ import { useRouter } from 'next/navigation'
 import { Plus, SlidersHorizontal } from 'lucide-react'
 import type { LegacyColumnDef as ColumnDef } from '@tanstack/react-table/legacy'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
-import { DataTable } from '@open-mercato/ui/backend/DataTable'
+import { BillingDataTable as DataTable } from './BillingDataTable'
 import { Tag } from '@open-mercato/ui/primitives/tag'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
-import { apiCallOrThrow, readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
+import { apiCall, apiCallOrThrow, readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
 import { normalizeCrudServerError } from '@open-mercato/ui/backend/utils/serverErrors'
 import { StatCard, Stat } from './DetailFields'
 
@@ -89,6 +89,17 @@ export function PrepaidPanel({
   const [adjAmount, setAdjAmount] = React.useState('')
   const [adjReason, setAdjReason] = React.useState('')
   const [adjSubmitting, setAdjSubmitting] = React.useState(false)
+  // Spec 0 (E-D1): online top-ups need the optional payment gateways module.
+  const [gatewayTopups, setGatewayTopups] = React.useState(false)
+  React.useEffect(() => {
+    let cancelled = false
+    void apiCall<{ capabilities?: { gatewayTopups?: boolean } }>('/api/billing/settings').then((call) => {
+      if (!cancelled) setGatewayTopups(call.ok && call.result?.capabilities?.gatewayTopups === true)
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [])
   const pageSize = 10
 
   const loadStatus = React.useCallback(async () => {
@@ -286,10 +297,12 @@ export function PrepaidPanel({
       <div className="flex flex-wrap items-center gap-2">
         {!topupOpen && !adjustOpen ? (
           <>
-            <Button type="button" onClick={() => setTopupOpen(true)}>
-              <Plus size={16} />
-              {t('billing.prepaid.topup.action', 'Top up')}
-            </Button>
+            {gatewayTopups ? (
+              <Button type="button" onClick={() => setTopupOpen(true)}>
+                <Plus size={16} />
+                {t('billing.prepaid.topup.action', 'Top up')}
+              </Button>
+            ) : null}
             <Button type="button" variant="outline" onClick={() => setAdjustOpen(true)}>
               <SlidersHorizontal size={16} />
               {t('billing.prepaid.adjust.action', 'Adjust')}

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

@@ -0,0 +1,298 @@
+"use client"
+import * as React from 'react'
+import Link from 'next/link'
+import type { LegacyColumnDef as ColumnDef } from '@tanstack/react-table/legacy'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { BillingDataTable as DataTable } from './BillingDataTable'
+import { Tag } from '@open-mercato/ui/primitives/tag'
+
+/**
+ * Spec A — per-bill-date breakdown of a Bill Run.
+ *
+ * Every run bills all due cycles, so one account outcome can stand for
+ * several invoices. These two tables flatten the outcomes currently shown
+ * on the run page into:
+ *   - Cycles: one row per (account, bill date) with its status and invoice;
+ *   - Skipped items: diagnostics such as partial periods not prorated.
+ * Both are paginated client-side over the already-loaded outcome page.
+ */
+
+export type RunCycle = {
+  bill_date: string
+  period_start: string | null
+  period_end: string | null
+  /** `charged` = prepaid charges debited from the balance (Spec F). */
+  status: 'invoiced' | 'charged' | 'previewed' | 'empty' | 'skipped_existing'
+  line_count: number
+  total_net: string
+  invoice_id: string | null
+  invoice_number?: string | null
+  /** Prepaid only: what left the balance, and the period's statement. */
+  total_debit?: string
+  statement_id?: string | null
+}
+
+export type RunCycleOutcome = {
+  bill_account_id: string
+  bill_account_name: string | null
+  cycles?: RunCycle[] | null
+  warnings: Record<string, unknown> | null
+}
+
+type CycleRow = RunCycle & { key: string; accountId: string; accountName: string }
+
+type SkippedRow = {
+  key: string
+  accountId: string
+  accountName: string
+  itemId: string
+  reason: string
+  periodStart: string | null
+  periodEnd: string | null
+}
+
+const PAGE_SIZE = 50
+
+function cycleVariant(status: RunCycle['status']): 'success' | 'info' | 'neutral' | 'warning' {
+  switch (status) {
+    case 'invoiced':
+    case 'charged':
+      return 'success'
+    case 'previewed':
+      return 'info'
+    case 'skipped_existing':
+      return 'warning'
+    default:
+      return 'neutral'
+  }
+}
+
+function usePagedRows<T>(rows: T[]): { page: number; setPage: (page: number) => void; pageRows: T[]; totalPages: number } {
+  const [page, setPage] = React.useState(1)
+  const totalPages = Math.max(1, Math.ceil(rows.length / PAGE_SIZE))
+  const safePage = Math.min(page, totalPages)
+  const pageRows = React.useMemo(
+    () => rows.slice((safePage - 1) * PAGE_SIZE, safePage * PAGE_SIZE),
+    [rows, safePage],
+  )
+  return { page: safePage, setPage, pageRows, totalPages }
+}
+
+export function RunCyclesSection({ outcomes }: { outcomes: RunCycleOutcome[] }) {
+  const t = useT()
+
+  const cycleRows = React.useMemo<CycleRow[]>(
+    () =>
+      outcomes.flatMap((outcome) =>
+        (outcome.cycles ?? []).map((cycle) => ({
+          ...cycle,
+          key: `${outcome.bill_account_id}:${cycle.bill_date}`,
+          accountId: outcome.bill_account_id,
+          accountName: outcome.bill_account_name ?? outcome.bill_account_id,
+        })),
+      ),
+    [outcomes],
+  )
+
+  const skippedRows = React.useMemo<SkippedRow[]>(
+    () =>
+      outcomes.flatMap((outcome) => {
+        const skipped = (outcome.warnings?.skipped_items ?? []) as Array<Record<string, unknown>>
+        return skipped.map((entry, index) => ({
+          key: `${outcome.bill_account_id}:${index}`,
+          accountId: outcome.bill_account_id,
+          accountName: outcome.bill_account_name ?? outcome.bill_account_id,
+          itemId: String(entry.item_id ?? ''),
+          reason: String(entry.reason ?? ''),
+          periodStart: typeof entry.service_period_start === 'string' ? entry.service_period_start : null,
+          periodEnd: typeof entry.service_period_end === 'string' ? entry.service_period_end : null,
+        }))
+      }),
+    [outcomes],
+  )
+
+  const hasPrepaid = React.useMemo(() => cycleRows.some((row) => row.total_debit !== undefined), [cycleRows])
+
+  const statusLabel = React.useCallback(
+    (status: RunCycle['status']) => {
+      switch (status) {
+        case 'invoiced':
+          return t('billing.runs.cycles.status.invoiced', 'Invoiced')
+        case 'charged':
+          return t('billing.runs.cycles.status.charged', 'Charged to balance')
+        case 'previewed':
+          return t('billing.runs.cycles.status.previewed', 'Preview')
+        case 'skipped_existing':
+          return t('billing.runs.cycles.status.skipped_existing', 'Skipped — already billed')
+        default:
+          return t('billing.runs.cycles.status.empty', 'Nothing to bill')
+      }
+    },
+    [t],
+  )
+
+  const reasonLabel = React.useCallback(
+    (reason: string) => {
+      switch (reason) {
+        case 'partial-period-not-prorated':
+          return t('billing.runs.skipped.reason.partial_not_prorated', 'Partial period, proration off')
+        case 'ended-after-billing-no-credit':
+          return t('billing.runs.skipped.reason.ended_no_credit', 'Ended after billing, proration off — no credit')
+        case 'period-cap-reached':
+          return t('billing.runs.skipped.reason.period_cap', 'Too many periods for one bill date')
+        default:
+          return reason
+      }
+    },
+    [t],
+  )
+
+  const cycleColumns = React.useMemo<ColumnDef<CycleRow>[]>(
+    () => [
+      {
+        accessorKey: 'accountName',
+        header: t('billing.runs.outcomes.columns.account', 'Account'),
+        cell: ({ row }) => (
+          <Link href={`/backend/billing/accounts/${row.original.accountId}`} className="text-sm text-primary hover:underline">
+            {row.original.accountName}
+          </Link>
+        ),
+      },
+      {
+        accessorKey: 'bill_date',
+        header: t('billing.runs.cycles.columns.bill_date', 'Bill date'),
+      },
+      {
+        accessorKey: 'period_start',
+        header: t('billing.runs.cycles.columns.service_period', 'Service period'),
+        cell: ({ row }) =>
+          row.original.period_start && row.original.period_end
+            ? `${row.original.period_start} – ${row.original.period_end}`
+            : '—',
+      },
+      {
+        accessorKey: 'status',
+        header: t('billing.runs.outcomes.columns.status', 'Status'),
+        cell: ({ row }) => <Tag variant={cycleVariant(row.original.status)}>{statusLabel(row.original.status)}</Tag>,
+      },
+      {
+        accessorKey: 'line_count',
+        header: t('billing.runs.cycles.columns.lines', 'Lines'),
+      },
+      {
+        accessorKey: 'total_net',
+        header: t('billing.runs.cycles.columns.total_net', 'Net total'),
+        cell: ({ row }) => <span className="font-mono tabular-nums">{row.original.total_net}</span>,
+      },
+      ...(hasPrepaid
+        ? [
+            {
+              accessorKey: 'total_debit',
+              header: t('billing.runs.cycles.columns.total_debit', 'Charged to balance'),
+              cell: ({ row }: { row: { original: CycleRow } }) =>
+                row.original.total_debit !== undefined ? (
+                  <span className="font-mono tabular-nums">{row.original.total_debit}</span>
+                ) : (
+                  '—'
+                ),
+            } satisfies ColumnDef<CycleRow>,
+          ]
+        : []),
+      {
+        accessorKey: 'invoice_id',
+        header: t('billing.runs.cycles.columns.document', 'Document'),
+        cell: ({ row }) =>
+          row.original.invoice_id ? (
+            <Link href={`/backend/billing/invoices/${row.original.invoice_id}`} className="text-sm text-primary hover:underline">
+              {row.original.invoice_number ?? row.original.invoice_id}
+            </Link>
+          ) : row.original.statement_id ? (
+            <Link href={`/backend/billing/statements/${row.original.statement_id}`} className="text-sm text-primary hover:underline">
+              {t('billing.runs.cycles.statement', 'Statement')}
+            </Link>
+          ) : (
+            '—'
+          ),
+      },
+    ],
+    [hasPrepaid, statusLabel, t],
+  )
+
+  const skippedColumns = React.useMemo<ColumnDef<SkippedRow>[]>(
+    () => [
+      {
+        accessorKey: 'accountName',
+        header: t('billing.runs.outcomes.columns.account', 'Account'),
+      },
+      {
+        accessorKey: 'itemId',
+        header: t('billing.runs.skipped.columns.item', 'Item'),
+        cell: ({ row }) => (
+          <Link href={`/backend/billing/items/${row.original.itemId}`} className="text-sm text-primary hover:underline">
+            {row.original.itemId}
+          </Link>
+        ),
+      },
+      {
+        accessorKey: 'reason',
+        header: t('billing.runs.skipped.columns.reason', 'Reason'),
+        cell: ({ row }) => reasonLabel(row.original.reason),
+      },
+      {
+        accessorKey: 'periodStart',
+        header: t('billing.runs.cycles.columns.service_period', 'Service period'),
+        cell: ({ row }) =>
+          row.original.periodStart ? `${row.original.periodStart} – ${row.original.periodEnd ?? '…'}` : '—',
+      },
+    ],
+    [reasonLabel, t],
+  )
+
+  const cyclesPaging = usePagedRows(cycleRows)
+  const skippedPaging = usePagedRows(skippedRows)
+
+  if (cycleRows.length === 0 && skippedRows.length === 0) return null
+
+  return (
+    <>
+      {cycleRows.length > 0 ? (
+        <div>
+          <h2 className="text-base font-semibold mb-1">{t('billing.runs.cycles.title', 'Cycles')}</h2>
+          <p className="text-sm text-muted-foreground mb-2">
+            {t(
+              'billing.runs.cycles.help',
+              'One row per account and bill date — a run bills every due cycle up to its as-of date.',
+            )}
+          </p>
+          <DataTable
+            columns={cycleColumns}
+            data={cyclesPaging.pageRows}
+            pagination={{
+              page: cyclesPaging.page,
+              pageSize: PAGE_SIZE,
+              total: cycleRows.length,
+              totalPages: cyclesPaging.totalPages,
+              onPageChange: cyclesPaging.setPage,
+            }}
+          />
+        </div>
+      ) : null}
+      {skippedRows.length > 0 ? (
+        <div>
+          <h2 className="text-base font-semibold mb-2">{t('billing.runs.skipped.title', 'Skipped items')}</h2>
+          <DataTable
+            columns={skippedColumns}
+            data={skippedPaging.pageRows}
+            pagination={{
+              page: skippedPaging.page,
+              pageSize: PAGE_SIZE,
+              total: skippedRows.length,
+              totalPages: skippedPaging.totalPages,
+              onPageChange: skippedPaging.setPage,
+            }}
+          />
+        </div>
+      ) : null}
+    </>
+  )
+}

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

@@ -0,0 +1,152 @@
+"use client"
+import * as React from 'react'
+import { Eraser, Trash2 } 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 } from '@open-mercato/ui/backend/utils/apiCall'
+import { normalizeCrudServerError } from '@open-mercato/ui/backend/utils/serverErrors'
+
+export type BillRunMode = 'real' | 'test' | 'dry'
+
+export function billRunMode(run: { dry_run?: boolean | null; test_mode?: boolean | null }): BillRunMode {
+  if (run.dry_run) return 'dry'
+  if (run.test_mode) return 'test'
+  return 'real'
+}
+
+export type TestRunActionsProps = {
+  runId: string
+  mode: BillRunMode
+  /** Test drafts the run wrote (from the run summary), for the confirm text. */
+  draftsCount?: number
+  onWiped?: (invoicesRemoved: number) => void
+  onDeleted?: (invoicesRemoved: number) => void
+}
+
+/**
+ * Confirm-then-call cleanup flows for a test / dry Bill Run (Spec F, F1),
+ * shared by the run detail page, the runs list row action and the account
+ * "Run billing" dialog. Each call resolves to the removed invoice count, or
+ * `null` when the operator cancelled or the call failed (already flashed).
+ */
+export function useTestRunCleanup() {
+  const t = useT()
+  const { confirm, ConfirmDialogElement } = useConfirmDialog()
+  const [busy, setBusy] = React.useState<'wipe' | 'delete' | null>(null)
+
+  const wipe = React.useCallback(
+    async (runId: string): Promise<number | null> => {
+      const ok = await confirm({
+        title: t('billing.runs.wipe.confirm.title', 'Wipe test invoices?'),
+        text: t(
+          'billing.runs.wipe.confirm.text',
+          'Every test invoice from this Bill Run will be permanently deleted. The run itself stays. This cannot be undone.',
+        ),
+        confirmText: t('billing.runs.wipe.confirm.button', 'Delete test invoices'),
+        variant: 'destructive',
+      })
+      if (!ok) return null
+      setBusy('wipe')
+      try {
+        const call = await apiCallOrThrow<{ invoicesRemoved: number }>('/api/billing/test-invoices/wipe', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ billRunId: runId }),
+        })
+        const removed = call.result?.invoicesRemoved ?? 0
+        flash(`${t('billing.runs.wipe.success', 'Test invoices removed')} (${removed})`, 'success')
+        return removed
+      } catch (err) {
+        const { message } = normalizeCrudServerError(err)
+        flash(message || t('billing.runs.wipe.error', 'Wipe failed'), 'error')
+        return null
+      } finally {
+        setBusy(null)
+      }
+    },
+    [confirm, t],
+  )
+
+  const remove = React.useCallback(
+    async (params: { runId: string; mode: BillRunMode; draftsCount?: number }): Promise<number | null> => {
+      const text =
+        params.mode === 'test' && typeof params.draftsCount === 'number' && params.draftsCount > 0
+          ? `${t('billing.runs.delete.confirm.text_with_invoices', 'The run, its results and its test invoices will be permanently deleted. Test invoices:')} ${params.draftsCount}`
+          : t('billing.runs.delete.confirm.text', 'The run and its results will be permanently deleted.')
+      const ok = await confirm({
+        title: t('billing.runs.delete.confirm.title', 'Delete this run?'),
+        text,
+        confirmText: t('billing.runs.delete.confirm.button', 'Delete run'),
+        variant: 'destructive',
+      })
+      if (!ok) return null
+      setBusy('delete')
+      try {
+        const call = await apiCallOrThrow<{ invoicesRemoved: number }>(
+          `/api/billing/runs/${encodeURIComponent(params.runId)}`,
+          { method: 'DELETE' },
+        )
+        flash(t('billing.runs.delete.success', 'Run deleted'), 'success')
+        return call.result?.invoicesRemoved ?? 0
+      } catch (err) {
+        const { message } = normalizeCrudServerError(err)
+        flash(message || t('billing.runs.delete.error', 'Delete failed'), 'error')
+        return null
+      } finally {
+        setBusy(null)
+      }
+    },
+    [confirm, t],
+  )
+
+  return { wipe, remove, busy, ConfirmDialogElement }
+}
+
+/**
+ * Cleanup buttons for a test / dry Bill Run: "Wipe test invoices" keeps the
+ * run, "Delete run" removes it with its test invoices. Renders nothing for
+ * real runs (they are never deleted).
+ */
+export function TestRunActions({ runId, mode, draftsCount, onWiped, onDeleted }: TestRunActionsProps) {
+  const t = useT()
+  const { wipe, remove, busy, ConfirmDialogElement } = useTestRunCleanup()
+
+  if (mode === 'real') return null
+  return (
+    <>
+      {mode === 'test' ? (
+        <Button
+          type="button"
+          variant="outline"
+          disabled={busy !== null}
+          onClick={async () => {
+            const removed = await wipe(runId)
+            if (removed !== null) onWiped?.(removed)
+          }}
+        >
+          <Eraser size={16} />
+          {busy === 'wipe'
+            ? t('billing.runs.wipe.in_progress', 'Wiping…')
+            : t('billing.runs.wipe.action', 'Wipe test invoices')}
+        </Button>
+      ) : null}
+      <Button
+        type="button"
+        variant="destructive"
+        disabled={busy !== null}
+        onClick={async () => {
+          const removed = await remove({ runId, mode, draftsCount })
+          if (removed !== null) onDeleted?.(removed)
+        }}
+      >
+        <Trash2 size={16} />
+        {busy === 'delete'
+          ? t('billing.runs.delete.in_progress', 'Deleting…')
+          : t('billing.runs.delete.action', 'Delete run')}
+      </Button>
+      {ConfirmDialogElement}
+    </>
+  )
+}

package/src/modules/billing/components/account/AccountItemsTab.tsx

@@ -0,0 +1,192 @@
+"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 { BillingDataTable as DataTable } from '../BillingDataTable'
+import { Tag } from '@open-mercato/ui/primitives/tag'
+import { readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
+import { itemBillingState, type ItemBillingState } from '../../lib/itemBillingState'
+import { formatDate } from './accountRow'
+
+// Snake_case projection of `GET /api/billing/items` (see its `fields`).
+type AccountItemRow = {
+  id: string
+  description: string
+  type: 'one_time' | 'recurring' | 'usage'
+  bill_start_date: string
+  bill_end_date: string | null
+  billed_to_date: string | null
+  rate_json: Record<string, unknown> | null
+  charge_timing: 'in_advance' | 'in_arrears'
+  price_basis?: 'net' | 'gross'
+  uom_code: string | null
+  is_active: boolean
+}
+
+function localToday(): string {
+  const now = new Date()
+  const month = String(now.getMonth() + 1).padStart(2, '0')
+  const date = String(now.getDate()).padStart(2, '0')
+  return `${now.getFullYear()}-${month}-${date}`
+}
+
+function stateVariant(state: ItemBillingState): 'success' | 'warning' | 'neutral' | 'info' {
+  switch (state.status) {
+    case 'billed':
+    case 'current':
+    case 'fully_billed':
+      return 'success'
+    case 'awaiting_run':
+    case 'due':
+      return 'warning'
+    case 'metered':
+      return 'info'
+    default:
+      return 'neutral'
+  }
+}
+
+/**
+ * The account's billing items (workspace Items tab): what each item costs,
+ * its term, how far it has been billed and — against today — whether a Bill
+ * Run still has to charge it.
+ */
+export function AccountItemsTab({ accountId, currencyCode }: { accountId: string; currencyCode?: string }) {
+  const t = useT()
+  const router = useRouter()
+  const [rows, setRows] = React.useState<AccountItemRow[]>([])
+  const [page, setPage] = React.useState(1)
+  const [total, setTotal] = React.useState(0)
+  const [totalPages, setTotalPages] = React.useState(1)
+  const [loading, setLoading] = React.useState(true)
+  const pageSize = 25
+  const today = React.useMemo(() => localToday(), [])
+
+  const load = React.useCallback(async () => {
+    setLoading(true)
+    try {
+      const result = await readApiResultOrThrow<{ items: AccountItemRow[]; total: number; totalPages: number }>(
+        `/api/billing/items?billAccountId=${accountId}&page=${page}` + `&pageSize=${pageSize}&sortField=createdAt&sortDir=desc`,
+      )
+      setRows(result.items ?? [])
+      setTotal(result.total ?? 0)
+      setTotalPages(result.totalPages ?? 1)
+    } finally {
+      setLoading(false)
+    }
+  }, [accountId, page])
+
+  React.useEffect(() => {
+    void load()
+  }, [load])
+
+  const typeLabel = React.useCallback(
+    (row: AccountItemRow) => {
+      if (row.type === 'one_time') return t('billing.items.form.type.one_time', 'One-time charge')
+      if (row.type === 'usage') return t('billing.items.form.type.usage', 'Usage (metered)')
+      return row.charge_timing === 'in_arrears'
+        ? t('billing.accounts.items.recurring_arrears', 'Recurring · in arrears')
+        : t('billing.accounts.items.recurring_advance', 'Recurring · in advance')
+    },
+    [t],
+  )
+
+  const rateLabel = React.useCallback(
+    (row: AccountItemRow) => {
+      const rate = row.rate_json ?? {}
+      const amount = typeof rate.amount === 'number' ? rate.amount : typeof rate.unit_price === 'number' ? rate.unit_price : null
+      if (amount === null) {
+        return 'model' in rate ? `${t('billing.accounts.items.tiered', 'Tiered')} (${String(rate.model)})` : '—'
+      }
+      const perUnit = row.type === 'usage' && row.uom_code ? ` / ${row.uom_code}` : ''
+      const basis = row.price_basis === 'gross' ? t('billing.items.price_basis.gross', 'Gross') : t('billing.items.price_basis.net', 'Net')
+      return `${amount}${currencyCode ? ` ${currencyCode}` : ''}${perUnit} · ${basis}`
+    },
+    [currencyCode, t],
+  )
+
+  const stateLabel = React.useCallback(
+    (state: ItemBillingState) => {
+      const date = state.date ? formatDate(state.date) : ''
+      switch (state.status) {
+        case 'inactive':
+          return t('billing.common.inactive', 'Inactive')
+        case 'metered':
+          return t('billing.accounts.items.state.metered', 'Billed from usage')
+        case 'scheduled':
+          return `${t('billing.accounts.items.state.scheduled', 'Starts')} ${date}`
+        case 'awaiting_run':
+          return t('billing.accounts.items.state.awaiting_run', 'Not billed yet')
+        case 'billed':
+          return t('billing.accounts.items.state.billed', 'Billed')
+        case 'current':
+          return `${t('billing.accounts.items.state.current', 'Billed through')} ${date}`
+        case 'due':
+          return `${t('billing.accounts.items.state.due', 'Due since')} ${date}`
+        case 'fully_billed':
+          return t('billing.accounts.items.state.fully_billed', 'Fully billed')
+      }
+    },
+    [t],
+  )
+
+  const columns = React.useMemo<ColumnDef<AccountItemRow>[]>(
+    () => [
+      {
+        accessorKey: 'description',
+        header: t('billing.items.columns.description', 'Description'),
+        cell: ({ row }) => <span className="text-sm font-medium text-primary">{row.original.description}</span>,
+      },
+      {
+        accessorKey: 'type',
+        header: t('billing.items.columns.type', 'Type'),
+        cell: ({ row }) => <span className="text-sm">{typeLabel(row.original)}</span>,
+      },
+      {
+        accessorKey: 'rate_json',
+        header: t('billing.items.form.rate.title', 'Rate'),
+        cell: ({ row }) => <span className="text-sm tabular-nums">{rateLabel(row.original)}</span>,
+      },
+      {
+        accessorKey: 'bill_start_date',
+        header: t('billing.accounts.items.term', 'Term'),
+        cell: ({ row }) =>
+          `${formatDate(row.original.bill_start_date)} – ${
+            row.original.bill_end_date ? formatDate(row.original.bill_end_date) : t('billing.accounts.items.open_ended', 'open-ended')
+          }`,
+      },
+      {
+        accessorKey: 'billed_to_date',
+        header: t('billing.accounts.items.billed_through', 'Billed through'),
+        cell: ({ row }) =>
+          row.original.type === 'recurring' && row.original.billed_to_date ? formatDate(row.original.billed_to_date) : '—',
+      },
+      {
+        id: 'billing_state',
+        header: t('billing.accounts.items.state', 'Billing'),
+        cell: ({ row }) => {
+          const state = itemBillingState(row.original, today)
+          return <Tag variant={stateVariant(state)}>{stateLabel(state)}</Tag>
+        },
+      },
+    ],
+    [rateLabel, stateLabel, t, today, typeLabel],
+  )
+
+  return (
+    <DataTable
+      title={t('billing.accounts.detail.items.title', 'Items')}
+      columns={columns}
+      data={rows}
+      isLoading={loading}
+      onRowClick={(row) => router.push(`/backend/billing/items/${row.id}`)}
+      pagination={{ page, pageSize, total, totalPages, onPageChange: setPage }}
+      emptyState={
+        <div className="rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground">
+          {t('billing.accounts.detail.items.empty', 'No items for this account yet.')}
+        </div>
+      }
+    />
+  )
+}