@dainamite/billing 0.19.0 → 0.21.0

package/src/modules/billing/backend/billing/accounts/[id]/page.tsx

@@ -1,15 +1,14 @@
 "use client"
 import * as React from 'react'
 import Link from 'next/link'
-import { Pencil, Plus } from 'lucide-react'
-import { useParams, useRouter } from 'next/navigation'
-import type { ColumnDef } from '@tanstack/react-table'
+import { Pencil, Play, Plus } from 'lucide-react'
+import { useParams, useRouter, useSearchParams } from 'next/navigation'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Page, PageBody, PageHeader } from '@open-mercato/ui/backend/Page'
 import { FormHeader } from '@open-mercato/ui/backend/forms'
-import { DataTable } from '@open-mercato/ui/backend/DataTable'
 import { Tag } from '@open-mercato/ui/primitives/tag'
 import { Button } from '@open-mercato/ui/primitives/button'
+import { Tabs, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'
 import { LoadingMessage, ErrorMessage } from '@open-mercato/ui/backend/detail'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'
@@ -19,15 +18,28 @@ import {
 } from '@open-mercato/ui/backend/utils/apiCall'
 import { normalizeCrudServerError } from '@open-mercato/ui/backend/utils/serverErrors'
 import { AccountForm, type AccountFormValues } from '../../../../components/AccountForm'
-import { DetailCard, DetailField } from '../../../../components/DetailFields'
 import { PrepaidPanel } from '../../../../components/PrepaidPanel'
+import { AccountInvoicesSection } from '../../../../components/AccountInvoicesSection'
+import { AccountPaymentsSection } from '../../../../components/AccountPaymentsSection'
+import { AccountView } from '../../../../components/account/AccountView'
+import { AccountItemsTab } from '../../../../components/account/AccountItemsTab'
+import { AccountUsageTab } from '../../../../components/account/AccountUsageTab'
+import { AccountRunsTab } from '../../../../components/account/AccountRunsTab'
+import { AccountStatementsTab } from '../../../../components/account/AccountStatementsTab'
+import { AccountSummaryCards } from '../../../../components/account/AccountSummaryCards'
+import { AccountRunBillingDialog } from '../../../../components/account/AccountRunBillingDialog'
+import { toFormValues, type AccountRow } from '../../../../components/account/accountRow'
+import { accountHref, isAccountTab, type AccountTab } from '../../../../lib/navigation'
 
 /**
- * `/backend/billing/accounts/[id]` — Billing Account detail.
+ * `/backend/billing/accounts/[id]` — the Billing Account workspace
+ * (Spec E §4, delivered by Spec F, F8).
  *
- * Opens read-only (field grid + the account's items). The `Edit`
- * button swaps the grid for the `AccountForm`; Save / Cancel return
- * to the read-only view. Loads via `GET /api/billing/accounts?id=<id>`,
+ * Header actions (Run billing, Add item / usage, Edit, Soft delete), summary
+ * cards from `GET /api/billing/accounts/{id}/summary`, and deep-linkable
+ * tabs (`?tab=`). A tab mounts on first open and stays mounted, so switching
+ * back keeps its page and filters; prepaid-only tabs are hidden for postpaid
+ * accounts and vice versa. Loads via `GET /api/billing/accounts?id=<id>`,
  * edits through `PUT`, soft-delete through `DELETE`.
  *
  * `customerId` + `currencyCode` are immutable on update — the form
@@ -35,346 +47,8 @@ import { PrepaidPanel } from '../../../../components/PrepaidPanel'
  * `billingAccountUpdateSchema`.
  */
 
-// API list rows are snake_case (see `api/accounts/route.ts` `fields`).
-type AccountRow = {
-  id: string
-  customer_id: string
-  name: string
-  currency_code: string
-  bill_cycle: 'weekly' | 'monthly' | 'quarterly' | 'annually'
-  bill_cycle_anchor: string
-  invoice_email: string
-  invoice_language: string
-  tax_id: string | null
-  invoice_address: {
-    line1?: string
-    line2?: string
-    city?: string
-    postal_code?: string
-    country?: string
-  } | null
-  next_bill_date: string
-  last_bill_date: string | null
-  billing_mode: 'postpaid' | 'prepaid'
-  credit_limit: string
-  is_active: boolean
-  created_at: string
-  updated_at: string
-}
-
 type ListResponse = { items: AccountRow[] }
 
-// Minimal item shape for the embedded "Items" table.
-type AccountItemRow = {
-  id: string
-  description: string
-  type: 'one_time' | 'recurring' | 'usage'
-  bill_start_date: string
-  is_active: boolean
-}
-
-// Minimal usage shape for the embedded "Usage" table. Mirrors the
-// snake_case `fields` projection in `api/usage/route.ts`. Usage is
-// append-only — `rated_in_bill_run_id` is null until a Bill Run rates it.
-type AccountUsageRow = {
-  id: string
-  uom_code: string
-  quantity: string
-  period_start: string
-  period_end: string
-  line_description: string | null
-  rated_in_bill_run_id: string | null
-}
-
-function formatDate(value: string | null | undefined): string {
-  if (!value) return '—'
-  const parsed = new Date(value)
-  return Number.isNaN(parsed.getTime()) ? value : parsed.toLocaleDateString()
-}
-
-function toFormValues(row: AccountRow): AccountFormValues {
-  return {
-    customerId: row.customer_id,
-    name: row.name,
-    currencyCode: row.currency_code,
-    billCycle: row.bill_cycle,
-    billCycleAnchor: row.bill_cycle_anchor,
-    invoiceEmail: row.invoice_email,
-    invoiceLanguage: row.invoice_language,
-    taxId: row.tax_id ?? '',
-    invoiceAddress: {
-      line1: row.invoice_address?.line1 ?? '',
-      line2: row.invoice_address?.line2 ?? '',
-      city: row.invoice_address?.city ?? '',
-      postal_code: row.invoice_address?.postal_code ?? '',
-      country: row.invoice_address?.country ?? '',
-    },
-    nextBillDate: row.next_bill_date?.slice(0, 10) ?? '',
-    isActive: row.is_active,
-    billingMode: row.billing_mode,
-    creditLimit: row.credit_limit ?? '0',
-    // The threshold lives on the balance row, not the account row — blank
-    // means "leave unchanged" on save.
-    lowBalanceThreshold: '',
-  }
-}
-
-// ─── Read-only view ──────────────────────────────────────────────
-
-function AccountView({ row }: { row: AccountRow }) {
-  const t = useT()
-  const addr = row.invoice_address
-  const addressText = addr
-    ? [
-        addr.line1,
-        addr.line2,
-        [addr.postal_code, addr.city].filter(Boolean).join(' '),
-        addr.country,
-      ]
-        .map((part) => (part ?? '').trim())
-        .filter(Boolean)
-        .join(', ')
-    : ''
-  return (
-    <DetailCard>
-      <DetailField label={t('billing.accounts.form.customer_id', 'Customer ID')}>
-        <span className="font-mono text-xs">{row.customer_id}</span>
-      </DetailField>
-      <DetailField label={t('billing.accounts.columns.currency', 'Currency')}>
-        {row.currency_code}
-      </DetailField>
-      <DetailField label={t('billing.accounts.columns.mode', 'Mode')}>
-        {row.billing_mode === 'prepaid' ? (
-          <Tag variant="brand">{t('billing.mode.prepaid', 'Prepaid')}</Tag>
-        ) : (
-          <Tag variant="neutral">{t('billing.mode.postpaid', 'Postpaid')}</Tag>
-        )}
-      </DetailField>
-      <DetailField label={t('billing.accounts.columns.credit_limit', 'Credit limit')}>
-        <span className="font-mono tabular-nums">{row.credit_limit}</span>
-      </DetailField>
-      <DetailField label={t('billing.common.id', 'ID')}>
-        <span className="font-mono text-xs">{row.id}</span>
-      </DetailField>
-      <DetailField label={t('billing.accounts.columns.cycle', 'Cycle')}>
-        {row.bill_cycle}
-        <span className="text-muted-foreground"> · {row.bill_cycle_anchor}</span>
-      </DetailField>
-      <DetailField label={t('billing.accounts.columns.next_bill', 'Next bill')}>
-        {formatDate(row.next_bill_date)}
-      </DetailField>
-      <DetailField label={t('billing.accounts.columns.last_bill', 'Last bill')}>
-        {formatDate(row.last_bill_date)}
-      </DetailField>
-      <DetailField label={t('billing.accounts.form.invoice_email', 'Invoice email')}>
-        {row.invoice_email}
-      </DetailField>
-      <DetailField label={t('billing.accounts.form.invoice_language', 'Invoice language')}>
-        {row.invoice_language}
-      </DetailField>
-      <DetailField label={t('billing.accounts.form.tax_id', 'Tax ID')}>
-        {row.tax_id || '—'}
-      </DetailField>
-      <DetailField
-        label={t('billing.accounts.form.address.title', 'Invoice address')}
-        fullWidth
-      >
-        {addressText || '—'}
-      </DetailField>
-    </DetailCard>
-  )
-}
-
-// ─── Embedded items table ────────────────────────────────────────
-
-function AccountItemsSection({ accountId }: { accountId: 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 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 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 }) => <Tag variant="info">{row.original.type}</Tag>,
-      },
-      {
-        accessorKey: 'bill_start_date',
-        header: t('billing.items.columns.start', 'Start'),
-        cell: ({ row }) => formatDate(row.original.bill_start_date),
-      },
-      {
-        accessorKey: 'is_active',
-        header: t('billing.items.columns.status', 'Status'),
-        cell: ({ row }) =>
-          row.original.is_active ? (
-            <Tag variant="success">{t('billing.common.active', 'Active')}</Tag>
-          ) : (
-            <Tag variant="default">{t('billing.common.inactive', 'Inactive')}</Tag>
-          ),
-      },
-    ],
-    [t],
-  )
-
-  return (
-    <div className="mt-6">
-      <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>
-        }
-      />
-    </div>
-  )
-}
-
-// ─── Embedded usage table ────────────────────────────────────────
-
-function AccountUsageSection({ accountId }: { accountId: string }) {
-  const t = useT()
-  const [rows, setRows] = React.useState<AccountUsageRow[]>([])
-  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 load = React.useCallback(async () => {
-    setLoading(true)
-    try {
-      const result = await readApiResultOrThrow<{
-        items: AccountUsageRow[]
-        total: number
-        totalPages: number
-      }>(
-        `/api/billing/usage?billAccountId=${accountId}&page=${page}` +
-          `&pageSize=${pageSize}&sortField=periodStart&sortDir=desc`,
-      )
-      setRows(result.items ?? [])
-      setTotal(result.total ?? 0)
-      setTotalPages(result.totalPages ?? 1)
-    } finally {
-      setLoading(false)
-    }
-  }, [accountId, page])
-
-  React.useEffect(() => {
-    void load()
-  }, [load])
-
-  const columns = React.useMemo<ColumnDef<AccountUsageRow>[]>(
-    () => [
-      {
-        accessorKey: 'uom_code',
-        header: t('billing.usage.columns.uom', 'Unit'),
-        cell: ({ row }) => (
-          <span className="font-mono text-xs">{row.original.uom_code}</span>
-        ),
-      },
-      {
-        accessorKey: 'quantity',
-        header: t('billing.usage.columns.quantity', 'Quantity'),
-        cell: ({ row }) => (
-          <span className="font-mono tabular-nums">{row.original.quantity}</span>
-        ),
-      },
-      {
-        accessorKey: 'period_start',
-        header: t('billing.usage.columns.period', 'Period'),
-        cell: ({ row }) =>
-          `${formatDate(row.original.period_start)} – ${formatDate(row.original.period_end)}`,
-      },
-      {
-        accessorKey: 'line_description',
-        header: t('billing.usage.columns.description', 'Description'),
-        cell: ({ row }) => row.original.line_description || '—',
-      },
-      {
-        accessorKey: 'rated_in_bill_run_id',
-        header: t('billing.usage.columns.rated', 'Rated'),
-        cell: ({ row }) =>
-          row.original.rated_in_bill_run_id ? (
-            // Rated records carry the Bill Run that priced them — link to it.
-            // Unrated records have no destination, so they stay non-interactive
-            // (no misleading row-level click affordance).
-            <Link
-              href={`/backend/billing/runs/${row.original.rated_in_bill_run_id}`}
-              className="rounded-sm hover:underline"
-            >
-              <Tag variant="success">{t('billing.usage.rated.yes', 'Rated')}</Tag>
-            </Link>
-          ) : (
-            <Tag variant="default">{t('billing.usage.rated.no', 'Unrated')}</Tag>
-          ),
-      },
-    ],
-    [t],
-  )
-
-  return (
-    <div className="mt-6">
-      <DataTable
-        title={t('billing.accounts.detail.usage.title', 'Usage')}
-        columns={columns}
-        data={rows}
-        isLoading={loading}
-        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.usage.empty', 'No usage records for this account yet.')}
-          </div>
-        }
-      />
-    </div>
-  )
-}
-
 export default function BillingAccountDetailPage(props: { params?: { id?: string } }) {
   const t = useT()
   const router = useRouter()
@@ -389,12 +63,34 @@ export default function BillingAccountDetailPage(props: { params?: { id?: string
   const [editing, setEditing] = React.useState(false)
   const [saving, setSaving] = React.useState(false)
   const [deleting, setDeleting] = React.useState(false)
+  const [runDialogOpen, setRunDialogOpen] = React.useState(false)
+  // Bumped after a run / cleanup so the summary and run-driven tabs reload.
+  const [refreshKey, setRefreshKey] = React.useState(0)
+  const refresh = React.useCallback(() => setRefreshKey((key) => key + 1), [])
+
+  // Deep-linkable tab (`?tab=`); router.replace keeps history clean.
+  const searchParams = useSearchParams()
+  const requestedTab = searchParams?.get('tab')
+  const activeTab: AccountTab = isAccountTab(requestedTab) ? requestedTab : 'overview'
+  const [visitedTabs, setVisitedTabs] = React.useState<Set<AccountTab>>(() => new Set([activeTab]))
+  React.useEffect(() => {
+    setVisitedTabs((prev) => (prev.has(activeTab) ? prev : new Set(prev).add(activeTab)))
+  }, [activeTab])
+  const selectTab = React.useCallback(
+    (next: string) => {
+      if (!isAccountTab(next) || !accountId) return
+      router.replace(accountHref(accountId, next), { scroll: false })
+    },
+    [accountId, router],
+  )
 
   const { confirm, ConfirmDialogElement } = useConfirmDialog()
 
-  const load = React.useCallback(async () => {
+  // `silent` refreshes the row in place (after a run / save) without the
+  // full-page loading state, which would unmount the workspace and its dialogs.
+  const load = React.useCallback(async (options: { silent?: boolean } = {}) => {
     if (!accountId) return
-    setLoading(true)
+    if (!options.silent) setLoading(true)
     setError(null)
     try {
       const result = await readApiResultOrThrow<ListResponse>(
@@ -446,6 +142,10 @@ export default function BillingAccountDetailPage(props: { params?: { id?: string
         // billingMode is immutable on update; creditLimit + threshold are editable.
         const creditLimit = Number.parseFloat(values.creditLimit)
         if (Number.isFinite(creditLimit) && creditLimit >= 0) payload.creditLimit = creditLimit
+        const termsDays = Number.parseInt(values.paymentTermsDays, 10)
+        payload.paymentTermsDays =
+          values.paymentTermsDays.trim() && Number.isInteger(termsDays) && termsDays >= 0 ? termsDays : null
+        payload.autoSendInvoice = values.autoSendInvoice
         if (row.billing_mode === 'prepaid' && values.lowBalanceThreshold.trim()) {
           const threshold = Number.parseFloat(values.lowBalanceThreshold)
           if (Number.isFinite(threshold) && threshold >= 0) payload.lowBalanceThreshold = threshold
@@ -458,7 +158,7 @@ export default function BillingAccountDetailPage(props: { params?: { id?: string
         })
         flash(t('billing.accounts.detail.save.success', 'Account updated'), 'success')
         setEditing(false)
-        void load()
+        void load({ silent: true })
       } catch (err) {
         const { message, fieldErrors } = normalizeCrudServerError(err)
         const fieldDetail =
@@ -507,6 +207,54 @@ export default function BillingAccountDetailPage(props: { params?: { id?: string
     }
   }, [confirm, router, row, t])
 
+  const isPrepaid = row?.billing_mode === 'prepaid'
+  const visibleTabs: AccountTab[] = isPrepaid
+    ? ['overview', 'items', 'usage', 'invoices', 'balance', 'statements', 'runs']
+    : ['overview', 'items', 'usage', 'invoices', 'payments', 'runs']
+  const tabLabels: Record<AccountTab, string> = {
+    overview: t('billing.accounts.tabs.overview', 'Overview'),
+    items: t('billing.accounts.tabs.items', 'Items'),
+    usage: t('billing.accounts.tabs.usage', 'Usage'),
+    invoices: t('billing.accounts.tabs.invoices', 'Invoices'),
+    payments: t('billing.accounts.tabs.payments', 'Payments'),
+    balance: t('billing.accounts.tabs.balance', 'Balance & top-ups'),
+    statements: t('billing.accounts.tabs.statements', 'Statements'),
+    runs: t('billing.accounts.tabs.runs', 'Bill runs'),
+  }
+  // A tab that does not apply to this account's mode falls back to Overview.
+  const currentTab: AccountTab = visibleTabs.includes(activeTab) ? activeTab : 'overview'
+  const renderTab = (tab: AccountTab): React.ReactNode => {
+    if (!row) return null
+    switch (tab) {
+      case 'overview':
+        return editing ? (
+          <AccountForm
+            mode="edit"
+            initial={toFormValues(row)}
+            submitting={saving}
+            onSubmit={handleSubmit}
+            onCancel={() => setEditing(false)}
+          />
+        ) : (
+          <AccountView row={row} />
+        )
+      case 'items':
+        return <AccountItemsTab key={refreshKey} accountId={row.id} currencyCode={row.currency_code} />
+      case 'usage':
+        return <AccountUsageTab accountId={row.id} />
+      case 'invoices':
+        return <AccountInvoicesSection key={refreshKey} accountId={row.id} showSummary={false} />
+      case 'payments':
+        return <AccountPaymentsSection accountId={row.id} currencyCode={row.currency_code} />
+      case 'balance':
+        return <PrepaidPanel key={refreshKey} accountId={row.id} currencyCode={row.currency_code} />
+      case 'statements':
+        return <AccountStatementsTab accountId={row.id} refreshKey={refreshKey} />
+      case 'runs':
+        return <AccountRunsTab accountId={row.id} refreshKey={refreshKey} />
+    }
+  }
+
   if (error) {
     return (
       <Page>
@@ -539,14 +287,25 @@ export default function BillingAccountDetailPage(props: { params?: { id?: string
         entityTypeLabel={t('billing.accounts.detail.title', 'Billing Account')}
         title={row.name}
         statusBadge={
-          row.is_active ? (
-            <Tag variant="success">{t('billing.common.active', 'Active')}</Tag>
-          ) : (
-            <Tag variant="default">{t('billing.common.inactive', 'Inactive')}</Tag>
-          )
+          <span className="inline-flex items-center gap-2">
+            {row.is_active ? (
+              <Tag variant="success">{t('billing.common.active', 'Active')}</Tag>
+            ) : (
+              <Tag variant="default">{t('billing.common.inactive', 'Inactive')}</Tag>
+            )}
+            {row.billing_mode === 'prepaid' ? (
+              <Tag variant="brand">{t('billing.mode.prepaid', 'Prepaid')}</Tag>
+            ) : (
+              <Tag variant="neutral">{t('billing.mode.postpaid', 'Postpaid')}</Tag>
+            )}
+          </span>
         }
         actionsContent={
           <>
+            <Button type="button" variant="outline" onClick={() => setRunDialogOpen(true)}>
+              <Play size={16} />
+              {t('billing.accounts.run.action', 'Run billing')}
+            </Button>
             <Button asChild variant="outline">
               <Link href={`/backend/billing/items/create?billAccountId=${row.id}`}>
                 <Plus size={16} />
@@ -560,7 +319,13 @@ export default function BillingAccountDetailPage(props: { params?: { id?: string
               </Link>
             </Button>
             {!editing ? (
-              <Button type="button" onClick={() => setEditing(true)}>
+              <Button
+                type="button"
+                onClick={() => {
+                  setEditing(true)
+                  selectTab('overview')
+                }}
+              >
                 <Pencil size={16} />
                 {t('billing.common.edit', 'Edit')}
               </Button>
@@ -579,22 +344,36 @@ export default function BillingAccountDetailPage(props: { params?: { id?: string
         }
       />
       <PageBody>
-        {editing ? (
-          <AccountForm
-            mode="edit"
-            initial={toFormValues(row)}
-            submitting={saving}
-            onSubmit={handleSubmit}
-            onCancel={() => setEditing(false)}
-          />
-        ) : (
-          <AccountView row={row} />
-        )}
-        {row.billing_mode === 'prepaid' ? (
-          <PrepaidPanel accountId={row.id} currencyCode={row.currency_code} />
-        ) : null}
-        <AccountItemsSection accountId={row.id} />
-        <AccountUsageSection accountId={row.id} />
+        <div className="space-y-6">
+          <AccountSummaryCards accountId={row.id} refreshKey={refreshKey} />
+          <Tabs value={currentTab} onValueChange={selectTab} variant="underline">
+            <TabsList aria-label={t('billing.accounts.tabs.label', 'Account sections')}>
+              {visibleTabs.map((tab) => (
+                <TabsTrigger key={tab} value={tab}>
+                  {tabLabels[tab]}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </Tabs>
+          {visibleTabs.map((tab) =>
+            visitedTabs.has(tab) || tab === currentTab ? (
+              <div key={tab} role="tabpanel" hidden={tab !== currentTab}>
+                {renderTab(tab)}
+              </div>
+            ) : null,
+          )}
+        </div>
+        <AccountRunBillingDialog
+          accountId={row.id}
+          open={runDialogOpen}
+          onOpenChange={setRunDialogOpen}
+          onCompleted={() => {
+            setRunDialogOpen(false)
+            refresh()
+            void load({ silent: true })
+            selectTab('runs')
+          }}
+        />
         {ConfirmDialogElement}
       </PageBody>
     </Page>

package/src/modules/billing/backend/billing/accounts/create/page.tsx

@@ -27,6 +27,7 @@ export default function CreateBillingAccountPage() {
       try {
         const payload: Record<string, unknown> = {
           customerId: values.customerId.trim(),
+          customerKind: values.customerKind,
           name: values.name.trim(),
           currencyCode: values.currencyCode.trim().toUpperCase(),
           billCycle: values.billCycle,
@@ -48,6 +49,11 @@ export default function CreateBillingAccountPage() {
         if (values.taxId.trim()) payload.taxId = values.taxId.trim()
         const creditLimit = Number.parseFloat(values.creditLimit)
         if (Number.isFinite(creditLimit) && creditLimit >= 0) payload.creditLimit = creditLimit
+        const termsDays = Number.parseInt(values.paymentTermsDays, 10)
+        if (values.paymentTermsDays.trim() && Number.isInteger(termsDays) && termsDays >= 0) {
+          payload.paymentTermsDays = termsDays
+        }
+        payload.autoSendInvoice = values.autoSendInvoice
         if (values.billingMode === 'prepaid' && values.lowBalanceThreshold.trim()) {
           const threshold = Number.parseFloat(values.lowBalanceThreshold)
           if (Number.isFinite(threshold) && threshold >= 0) payload.lowBalanceThreshold = threshold