@dainamite/billing 0.20.0 → 0.22.0

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

@@ -0,0 +1,70 @@
+"use client"
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@open-mercato/ui/primitives/select'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+
+/**
+ * Billing account picker (search + select), bounded to 50 results per query.
+ * `currencyCode` / `billingMode` narrow the candidates client-side (payments
+ * can only go to an account of the same currency; top-ups only to prepaid).
+ */
+
+export type AccountChoice = { id: string; name: string; currency_code: string; billing_mode: string }
+
+export function AccountPicker({
+  value,
+  onChange,
+  currencyCode,
+  billingMode,
+}: {
+  value: string
+  onChange: (id: string) => void
+  currencyCode?: string
+  billingMode?: 'postpaid' | 'prepaid'
+}) {
+  const t = useT()
+  const [search, setSearch] = React.useState('')
+  const [options, setOptions] = React.useState<AccountChoice[]>([])
+
+  React.useEffect(() => {
+    let cancelled = false
+    const handle = setTimeout(() => {
+      const params = new URLSearchParams({ pageSize: '50' })
+      if (search.trim()) params.set('search', search.trim())
+      if (billingMode) params.set('billingMode', billingMode)
+      void apiCall<{ items: AccountChoice[] }>(`/api/billing/accounts?${params.toString()}`).then((call) => {
+        if (cancelled) return
+        const items = call.ok ? (call.result?.items ?? []) : []
+        setOptions(currencyCode ? items.filter((a) => a.currency_code === currencyCode) : items)
+      })
+    }, 250)
+    return () => {
+      cancelled = true
+      clearTimeout(handle)
+    }
+  }, [billingMode, currencyCode, search])
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Input
+        value={search}
+        placeholder={t('billing.payments.account_picker.search', 'Search accounts…')}
+        onChange={(event) => setSearch(event.currentTarget.value)}
+      />
+      <Select value={value} onValueChange={onChange}>
+        <SelectTrigger>
+          <SelectValue placeholder={t('billing.payments.account_picker.placeholder', 'Select an account')} />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map((option) => (
+            <SelectItem key={option.id} value={option.id}>
+              {option.name} · {option.currency_code}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}

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

@@ -0,0 +1,167 @@
+"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, 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 { formatMoney } from './InvoicesTable'
+
+/**
+ * Manual allocation (Spec C): lists the open invoices / debit memos of the
+ * payment's account (oldest due first) with amounts pre-filled from the
+ * unallocated money; the operator edits them and confirms.
+ */
+
+type OpenInvoice = {
+  id: string
+  number: string
+  document_type: string
+  status: string
+  due_date: string | null
+  outstanding: string
+  currency_code: string
+}
+
+export function AllocatePaymentDialog({
+  open,
+  onClose,
+  onDone,
+  paymentId,
+  billAccountId,
+  unallocated,
+  currencyCode,
+}: {
+  open: boolean
+  onClose: () => void
+  onDone: () => void
+  paymentId: string
+  billAccountId: string
+  unallocated: number
+  currencyCode: string
+}) {
+  const t = useT()
+  const [invoices, setInvoices] = React.useState<OpenInvoice[]>([])
+  const [amounts, setAmounts] = React.useState<Record<string, string>>({})
+  const [saving, setSaving] = React.useState(false)
+
+  React.useEffect(() => {
+    if (!open) return
+    void apiCall<{ items: OpenInvoice[] }>(
+      `/api/billing/invoices?billAccountId=${encodeURIComponent(billAccountId)}&testRun=false&pageSize=100`,
+    ).then((call) => {
+      const open = (call.ok ? (call.result?.items ?? []) : [])
+        .filter(
+          (inv) =>
+            ['posted', 'partially_paid'].includes(inv.status) &&
+            ['invoice', 'debit_memo'].includes(inv.document_type) &&
+            Number.parseFloat(inv.outstanding) > 0 &&
+            inv.currency_code === currencyCode,
+        )
+        .sort((a, b) => (a.due_date ?? '9999').localeCompare(b.due_date ?? '9999'))
+      setInvoices(open)
+      let left = Math.round(unallocated * 100)
+      const prefill: Record<string, string> = {}
+      for (const inv of open) {
+        const take = Math.min(left, Math.round(Number.parseFloat(inv.outstanding) * 100))
+        prefill[inv.id] = take > 0 ? (take / 100).toFixed(2) : ''
+        left -= Math.max(0, take)
+      }
+      setAmounts(prefill)
+    })
+  }, [billAccountId, currencyCode, open, unallocated])
+
+  const total = Object.values(amounts).reduce((sum, v) => sum + (Number.parseFloat(v) || 0), 0)
+
+  const submit = React.useCallback(async () => {
+    const allocations = Object.entries(amounts)
+      .map(([invoiceId, value]) => ({ invoiceId, amount: Number.parseFloat(value) }))
+      .filter((a) => a.amount > 0)
+    if (allocations.length === 0 || saving) return
+    if (total > unallocated + 0.0001) {
+      flash(t('billing.payments.allocate.too_much', 'The total is more than the unallocated amount'), 'error')
+      return
+    }
+    setSaving(true)
+    try {
+      await apiCallOrThrow('/api/billing/payments/allocate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ paymentId, allocations }),
+      })
+      flash(t('billing.payments.allocate.success', 'Payment allocated'), 'success')
+      onDone()
+      onClose()
+    } catch (err) {
+      flash(normalizeCrudServerError(err).message || t('billing.payments.allocate.failed', 'Allocation failed'), 'error')
+    } finally {
+      setSaving(false)
+    }
+  }, [amounts, onClose, onDone, paymentId, saving, t, total, unallocated])
+
+  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.allocate.title', 'Allocate payment')}</DialogTitle>
+          <DialogDescription>
+            {t('billing.payments.allocate.help', 'Unallocated')}: {formatMoney(String(unallocated), currencyCode)}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex max-h-80 flex-col gap-2 overflow-auto py-2 text-sm">
+          {invoices.length === 0 ? (
+            <div className="text-muted-foreground">{t('billing.payments.allocate.none', 'This account has no open invoices.')}</div>
+          ) : (
+            invoices.map((inv) => (
+              <div key={inv.id} className="grid grid-cols-[1fr_auto_120px] items-center gap-3">
+                <div>
+                  <div className="font-medium">{inv.number}</div>
+                  <div className="text-xs text-muted-foreground">
+                    {t('billing.invoices.columns.due', 'Due')}: {inv.due_date?.slice(0, 10) ?? '—'}
+                  </div>
+                </div>
+                <span className="tabular-nums text-muted-foreground">{formatMoney(inv.outstanding, inv.currency_code)}</span>
+                <Input
+                  type="number"
+                  min="0"
+                  step="0.01"
+                  value={amounts[inv.id] ?? ''}
+                  onChange={(e) => {
+                    const value = e.currentTarget.value
+                    setAmounts((prev) => ({ ...prev, [inv.id]: value }))
+                  }}
+                />
+              </div>
+            ))
+          )}
+        </div>
+        <DialogFooter>
+          <div className="flex w-full items-center justify-between gap-3">
+            <span className="text-xs text-muted-foreground">
+              {t('billing.payments.allocate.total', 'Total')}: {formatMoney(String(total), currencyCode)} ·{' '}
+              <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 || total <= 0}>
+                {t('billing.payments.allocate.action', 'Allocate')}
+              </Button>
+            </div>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,34 @@
+"use client"
+import * as React from 'react'
+import type { RowData } from '@tanstack/react-table'
+import { DataTable, type DataTableProps } from '@open-mercato/ui/backend/DataTable'
+
+/**
+ * Billing's DataTable, with two billing-wide layout defaults:
+ *
+ *  1. Flush alignment — the framework card container carries a small side
+ *     margin (`mx-1 sm:mx-2`) that is not overridable, so billing tables sat
+ *     a few pixels inset from everything around them (tabs, detail cards,
+ *     page header). The wrapper cancels exactly that margin. Embedded tables
+ *     have no card / margin and are left alone.
+ *  2. Wrapped cells — the framework truncates every cell at a per-column-type
+ *     max width (e.g. 250px for `description`), which cut invoice lines and
+ *     item terms off mid-word while the rest of the row stayed empty. Billing
+ *     columns wrap instead; a column can still opt back in with
+ *     `meta: { truncate: true }`.
+ */
+export function BillingDataTable<T extends RowData>(props: DataTableProps<T>) {
+  const columns = React.useMemo(
+    () =>
+      props.columns.map((column) => {
+        const meta = (column.meta ?? {}) as Record<string, unknown>
+        if (typeof meta.truncate === 'boolean') return column
+        return { ...column, meta: { ...meta, truncate: false } }
+      }),
+    [props.columns],
+  ) as DataTableProps<T>['columns']
+
+  const table = <DataTable<T> {...props} columns={columns} />
+  if (props.embedded) return table
+  return <div className="-mx-1 sm:-mx-2">{table}</div>
+}

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

@@ -0,0 +1,25 @@
+"use client"
+import * as React from 'react'
+import Link from 'next/link'
+import { Settings } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+
+/** Route of the billing settings page (seller, bank, terms, numbering, prepaid). */
+export const BILLING_SETTINGS_HREF = '/backend/config/billing'
+
+/**
+ * Header shortcut to the billing settings page (Spec F, F6). The target page
+ * enforces `billing.settings.view` itself, so the link is not gated here.
+ */
+export function BillingSettingsLink() {
+  const t = useT()
+  return (
+    <Button asChild variant="outline">
+      <Link href={BILLING_SETTINGS_HREF}>
+        <Settings size={16} />
+        {t('billing.settings.link', 'Billing settings')}
+      </Link>
+    </Button>
+  )
+}

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

@@ -0,0 +1,180 @@
+"use client"
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+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 {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@open-mercato/ui/primitives/dialog'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { apiCallOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
+import { normalizeCrudServerError } from '@open-mercato/ui/backend/utils/serverErrors'
+import { MoneyInput } from './MoneyInput'
+
+/**
+ * "Change price" for a recurring item: effective date + new price →
+ * `POST /api/billing/items/change-price`. The current item ends the day
+ * before; a copy with the new price starts on the date. On success the caller
+ * opens the new item.
+ */
+
+export type ChangeItemPriceDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  itemId: string
+  currentPrice: number | null
+  currencyCode?: string | null
+  priceBasis: 'net' | 'gross'
+  /** The earliest allowed effective date is the day after this (YYYY-MM-DD). */
+  billStartDate: string
+  billEndDate?: string | null
+  onChanged: (newItemId: string) => void
+}
+
+function todayIso(): string {
+  return new Date().toISOString().slice(0, 10)
+}
+
+function nextDay(iso: string): string {
+  const date = new Date(`${iso.slice(0, 10)}T00:00:00Z`)
+  date.setUTCDate(date.getUTCDate() + 1)
+  return date.toISOString().slice(0, 10)
+}
+
+function previousDay(iso: string): string {
+  const date = new Date(`${iso}T00:00:00Z`)
+  date.setUTCDate(date.getUTCDate() - 1)
+  return date.toISOString().slice(0, 10)
+}
+
+export function ChangeItemPriceDialog({
+  open,
+  onOpenChange,
+  itemId,
+  currentPrice,
+  currencyCode,
+  priceBasis,
+  billStartDate,
+  billEndDate,
+  onChanged,
+}: ChangeItemPriceDialogProps) {
+  const t = useT()
+  const minDate = nextDay(billStartDate)
+  const maxDate = billEndDate ? billEndDate.slice(0, 10) : undefined
+  const [effectiveDate, setEffectiveDate] = React.useState('')
+  const [price, setPrice] = React.useState('')
+  const [saving, setSaving] = React.useState(false)
+
+  React.useEffect(() => {
+    if (!open) return
+    const today = todayIso()
+    setEffectiveDate(today < minDate ? minDate : today)
+    setPrice(currentPrice != null ? String(currentPrice) : '')
+  }, [currentPrice, minDate, open])
+
+  const parsedPrice = Number.parseFloat(price)
+  const priceValid = price.trim() !== '' && Number.isFinite(parsedPrice) && parsedPrice >= 0
+  const dateValid = effectiveDate >= minDate && (!maxDate || effectiveDate <= maxDate)
+
+  const handleSubmit = React.useCallback(async () => {
+    if (!priceValid || !dateValid || saving) return
+    setSaving(true)
+    try {
+      const call = await apiCallOrThrow<{ previousItemId: string; newItemId: string }>('/api/billing/items/change-price', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id: itemId, effectiveDate, unitPrice: parsedPrice }),
+      })
+      const newItemId = call.result?.newItemId
+      flash(t('billing.items.change_price.success', 'Price changed — the new item is active from the effective date'), 'success')
+      onOpenChange(false)
+      if (newItemId) onChanged(newItemId)
+    } catch (err) {
+      const { message } = normalizeCrudServerError(err)
+      const code = (err as { body?: { code?: string } } | null)?.body?.code
+      flash(code ? t(code, message || code) : message || t('billing.items.change_price.error', 'Could not change the price'), 'error')
+    } finally {
+      setSaving(false)
+    }
+  }, [dateValid, effectiveDate, itemId, onChanged, onOpenChange, parsedPrice, priceValid, saving, t])
+
+  const basisLabel =
+    priceBasis === 'gross' ? t('billing.items.price_basis.gross', 'Gross') : t('billing.items.price_basis.net', 'Net')
+
+  return (
+    <Dialog open={open} onOpenChange={(next) => (!saving ? onOpenChange(next) : undefined)}>
+      <DialogContent
+        onKeyDown={(event) => {
+          if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+            event.preventDefault()
+            void handleSubmit()
+          }
+        }}
+      >
+        <DialogHeader>
+          <DialogTitle>{t('billing.items.change_price.title', 'Change price')}</DialogTitle>
+          <DialogDescription>
+            {t(
+              'billing.items.change_price.description',
+              'This item ends the day before the effective date and a copy with the new price starts on it. Days already billed after the change are credited and charged again at the new price, per the item proration setting.',
+            )}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <label className="flex flex-col gap-1 text-sm">
+            <span className="text-muted-foreground">{t('billing.items.change_price.effective_date', 'Effective from')}</span>
+            <Input
+              type="date"
+              value={effectiveDate}
+              min={minDate}
+              max={maxDate}
+              onChange={(event) => setEffectiveDate(event.currentTarget.value)}
+            />
+            {effectiveDate && dateValid ? (
+              <span className="text-xs text-muted-foreground">
+                {t('billing.items.change_price.current_ends', 'Current price ends on')} {previousDay(effectiveDate)}
+              </span>
+            ) : (
+              <span className="text-xs text-destructive">
+                {t('billing.items.change_price.date_range', 'Pick a date after the item start')}
+                {maxDate ? ` ${t('billing.items.change_price.and_before', 'and on or before')} ${maxDate}` : ''}
+              </span>
+            )}
+          </label>
+          <label className="flex flex-col gap-1 text-sm">
+            <span className="text-muted-foreground">
+              {t('billing.items.change_price.new_price', 'New unit price per cycle')} ({basisLabel})
+            </span>
+            <MoneyInput currencyCode={currencyCode} step="0.01" min="0" value={price} onChange={(event) => setPrice(event.currentTarget.value)} />
+            {currentPrice != null ? (
+              <span className="text-xs text-muted-foreground">
+                {t('billing.items.change_price.current_price', 'Current price')}: {currentPrice}
+                {currencyCode ? ` ${currencyCode}` : ''}
+              </span>
+            ) : null}
+          </label>
+        </div>
+        <DialogFooter className="flex items-center justify-between gap-3 sm:justify-between">
+          <span className="text-xs text-muted-foreground">
+            <KbdShortcut keys={['Ctrl/⌘', 'Enter']} /> {t('billing.items.form.submit_hint', 'to save,')} <Kbd>Esc</Kbd>{' '}
+            {t('billing.items.form.cancel_hint', 'to discard')}
+          </span>
+          <div className="flex items-center gap-2">
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={saving}>
+              {t('billing.common.cancel', 'Cancel')}
+            </Button>
+            <Button type="button" onClick={() => void handleSubmit()} disabled={!priceValid || !dateValid || saving}>
+              {saving ? t('billing.items.form.saving', 'Saving…') : t('billing.items.change_price.action', 'Change price')}
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}