{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"commission-statement","type":"registry:ui","title":"CommissionStatement","description":"Per-period earnings ledger \u2014 level, source member, tier multiplier, and amount per row, with a paid\/pending status and totals.","package":"fancy-mlm-ui","dependencies":["@particle-academy\/react-fancy"],"registryDependencies":[],"files":[{"path":"components\/fancy\/commission-statement\/CommissionStatement.tsx","content":"import { cn, Badge } from \"@particle-academy\/react-fancy\";\nimport type { CommissionRow } from \".\/types\";\n\nexport interface CommissionStatementProps {\n  \/** Reward rows (controlled) \u2014 typically the engine's RewardComputation list. *\/\n  rows: CommissionRow[];\n  \/** Format an amount for display (default: `toLocaleString`). *\/\n  formatAmount?: (amount: number, row: CommissionRow) => string;\n  \/** Shown when there are no rows. *\/\n  emptyLabel?: string;\n  className?: string;\n}\n\n\/**\n * A commission \/ referral-bonus statement. Each row carries a stable\n * `data-mlm-commission-row` handle; reversed rows are struck through and\n * excluded from the paid total.\n *\/\nexport function CommissionStatement({\n  rows,\n  formatAmount,\n  emptyLabel = \"No commissions yet.\",\n  className,\n}: CommissionStatementProps) {\n  const format = formatAmount ?? ((amount: number) => amount.toLocaleString());\n  const paidTotal = rows\n    .filter((row) => !row.status || row.status === \"paid\")\n    .reduce((sum, row) => sum + row.amount, 0);\n\n  if (rows.length === 0) {\n    return (\n      <div data-fancy-mlm=\"commission-statement\" className={cn(\"fancy-mlm-statement is-empty\", className)}>\n        {emptyLabel}\n      <\/div>\n    );\n  }\n\n  return (\n    <div data-fancy-mlm=\"commission-statement\" className={cn(\"fancy-mlm-statement\", className)}>\n      <table className=\"fancy-mlm-statement__table\">\n        <thead>\n          <tr>\n            <th className=\"fancy-mlm-statement__num\">Level<\/th>\n            <th>Recipient<\/th>\n            <th>Tier<\/th>\n            <th className=\"fancy-mlm-statement__num\">Amount<\/th>\n            <th>Status<\/th>\n          <\/tr>\n        <\/thead>\n        <tbody>\n          {rows.map((row, index) => {\n            const status = row.status ?? \"paid\";\n            return (\n              <tr\n                key={row.id ?? `${row.recipientMemberId ?? \"row\"}-${index}`}\n                data-mlm-commission-row={row.id ?? row.recipientMemberId}\n                data-mlm-status={status}\n                className={cn(status === \"reversed\" && \"is-reversed\")}\n              >\n                <td className=\"fancy-mlm-statement__num\">{row.level}<\/td>\n                <td>{row.recipientLabel ?? row.recipientMemberId ?? \"\u2014\"}<\/td>\n                <td>{row.tier ? <Badge variant=\"soft\">{row.tier}<\/Badge> : null}<\/td>\n                <td className=\"fancy-mlm-statement__num\">{format(row.amount, row)}<\/td>\n                <td>\n                  <Badge variant=\"soft\">{status}<\/Badge>\n                <\/td>\n              <\/tr>\n            );\n          })}\n        <\/tbody>\n        <tfoot>\n          <tr>\n            <td colSpan={3} className=\"fancy-mlm-statement__total-label\">Total (paid)<\/td>\n            <td className=\"fancy-mlm-statement__num fancy-mlm-statement__total\">{format(paidTotal, rows[0]!)}<\/td>\n            <td \/>\n          <\/tr>\n        <\/tfoot>\n      <\/table>\n    <\/div>\n  );\n}\n","type":"registry:ui","target":"components\/fancy\/commission-statement\/CommissionStatement.tsx"}]}