金額内訳AmountBreakdownExperimental
The read-only money-derivation ledger: labeled line items, signed deductions, optional per-section subtotals, and an emphasized derived total, with an optional formula caption. The 'labeled lines → ± adjustments → total' block every 請求 / 見積 / 査定 / 支払 / 精算 / 控除 / 給与明細 screen needs (認定損害額 − 過失相殺 − 免責 − 既払金 = 今回支払額 / 基本保険料 ＋ 特約 − 各割引 = 年間保険料). Deductions render as a −|amount| glyph (sign never colour-only) with an sr-only 控除 label. Read-only by design — for an editable line-item grid with column totals use EditableDataTable; for a single signed delta use Statistic/Delta; for the back-office KPI strip use StatGroup. RSC-safe by default (formatValue defaults to formatCurrency); pass a custom formatValue only from a client boundary.
プレビュー
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| lines | AmountLine[] | - | 行（順番どおり）。各行は line（既定）/ subtotal（点線の小計）/ heading（セクション見出し）。 |
| AmountLine.label | ReactNode | - | 行ラベル。 |
| AmountLine.amount | number | - | 金額。正の値を渡し、減算は kind で表す（heading は省略）。 |
| AmountLine.kind | "add" | "subtract" | "add" | subtract は −|amount| を控除トーンで表示（符号は色だけに依存しない）。 |
| AmountLine.note | ReactNode | - | ラベル下の補足（過失割合 30% / 特約名 / 等級 など）。 |
| total | { label, amount, tone? } | - | 強調表示する導出合計。tone は neutral（既定）/ positive / negative。 |
| formula | ReactNode | - | 合計の下に出す数式キャプション（例: 今回支払額 = 認定損害額 − 過失相殺 − 免責 − 既払金）。 |
| formatValue | (value: number) => string | formatCurrency | 値の整形。既定は formatCurrency（JPY / ja-JP）＝RSC安全。独自の関数を渡すのはクライアント境界からのみ。 |
Usage
import { AmountBreakdown } from "@gunjo/ui"
<AmountBreakdown
lines={[
{ type: "heading", label: "認定損害額" },
{ label: "修理費", amount: 480000 },
{ label: "レッカー費用", amount: 22000 },
{ type: "subtotal", label: "認定損害額 計", amount: 502000 },
{ label: "過失相殺", kind: "subtract", amount: 150600, note: "認定額 × 過失割合 30%" },
{ label: "免責金額", kind: "subtract", amount: 50000 },
{ label: "既払金（内払）", kind: "subtract", amount: 100000 },
]}
total={{ label: "今回支払額", amount: 201400 }}
formula="今回支払額 = 認定損害額 − 過失相殺 − 免責 − 既払金"
/>