{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "payouts-management-table", "title": "Payouts Management Table", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/payouts-management-table/payouts-management-table.component.ts", "content": "import { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport {\n Building2,\n CalendarClock,\n CheckCircle2,\n Clock,\n Download,\n ExternalLink,\n FileText,\n Landmark,\n LucideAngularModule,\n MoreHorizontal,\n ShieldCheck,\n Wallet,\n Zap,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport {\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n} from '@/ui/dropdown-menu/dropdown-menu.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\nexport type PayoutStatus = 'paid' | 'in_transit' | 'pending' | 'failed'\n\nexport interface PayoutBatch {\n id: string\n initiatedDate: string\n arrivalDate: string\n destination: string\n grossAmount: string\n feeAmount: string\n netAmount: string\n status: PayoutStatus\n}\n\nconst statusConfig: Record = {\n paid: { label: 'Paid', className: 'bg-success/10 text-success border-success/20' },\n in_transit: { label: 'In Transit', className: 'bg-info/10 text-info border-info/20' },\n pending: { label: 'Pending', className: 'bg-warning/10 text-warning border-warning/20' },\n failed: { label: 'Failed', className: 'bg-destructive/10 text-destructive border-destructive/20' },\n}\n\ninterface SummaryItem {\n title: string\n amount: string\n description: string\n icon: unknown\n iconClass: string\n}\n\nconst summary: SummaryItem[] = [\n {\n title: 'Available for Payout',\n amount: '$18,420.50',\n description: 'Auto-transfers daily at 00:00 UTC',\n icon: Wallet,\n iconClass: 'bg-success/10 text-success',\n },\n {\n title: 'In Transit / Scheduled',\n amount: '$4,250.00',\n description: 'Estimated arrival: Aug 23, 2026',\n icon: Clock,\n iconClass: 'bg-info/10 text-info',\n },\n {\n title: 'Rolling Reserve / Held',\n amount: '$1,500.00',\n description: 'Released in 14 days',\n icon: ShieldCheck,\n iconClass: 'bg-warning/10 text-warning',\n },\n]\n\nconst payouts: PayoutBatch[] = [\n {\n id: 'PO-84920',\n initiatedDate: 'Aug 21, 2026',\n arrivalDate: 'Est. Aug 23, 2026',\n destination: 'Chase •••• 4892',\n grossAmount: '$12,780.00',\n feeAmount: '-$330.00',\n netAmount: '$12,450.00',\n status: 'in_transit',\n },\n {\n id: 'PO-84919',\n initiatedDate: 'Aug 20, 2026',\n arrivalDate: 'Est. Aug 22, 2026',\n destination: 'Chase •••• 4892',\n grossAmount: '$8,950.00',\n feeAmount: '-$245.50',\n netAmount: '$8,704.50',\n status: 'pending',\n },\n {\n id: 'PO-84918',\n initiatedDate: 'Aug 19, 2026',\n arrivalDate: 'Aug 21, 2026',\n destination: 'Chase •••• 4892',\n grossAmount: '$15,400.00',\n feeAmount: '-$398.00',\n netAmount: '$15,002.00',\n status: 'paid',\n },\n {\n id: 'PO-84917',\n initiatedDate: 'Aug 18, 2026',\n arrivalDate: 'Aug 20, 2026',\n destination: 'Chase •••• 4892',\n grossAmount: '$9,220.00',\n feeAmount: '-$238.40',\n netAmount: '$8,981.60',\n status: 'paid',\n },\n {\n id: 'PO-84916',\n initiatedDate: 'Aug 17, 2026',\n arrivalDate: 'Aug 19, 2026',\n destination: 'Chase •••• 4892',\n grossAmount: '$6,100.00',\n feeAmount: '-$162.00',\n netAmount: '$5,938.00',\n status: 'failed',\n },\n {\n id: 'PO-84915',\n initiatedDate: 'Aug 16, 2026',\n arrivalDate: 'Aug 18, 2026',\n destination: 'Chase •••• 4892',\n grossAmount: '$18,340.00',\n feeAmount: '-$460.00',\n netAmount: '$17,880.00',\n status: 'paid',\n },\n]\n\n/**\n * PayoutsManagementTable -- the React block, 1:1: header with payout schedule + instant\n * payout actions, three KPI cards (available, in-transit, rolling reserve), a verified\n * settlement bank destination card, and a batch transfer history table with gross/fee/net\n * amounts, status badges and per-row action menus, closed by a pagination hint.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-payouts-management-table, [ui-payouts-management-table]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n UiTableComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n
\n
\n

Payouts & Transfers

\n

\n Track automated scheduled settlements, rolling reserves, and bank transfers.\n

\n
\n
\n \n \n
\n
\n\n
\n @for (item of summary; track item.title) {\n
\n
\n
\n

{{ item.title }}

\n
\n \n
\n
\n
\n

{{ item.amount }}

\n

{{ item.description }}

\n
\n
\n
\n }\n
\n\n
\n
\n
\n
\n \n
\n
\n
\n Chase Commercial •••• 4892\n \n \n Verified\n \n Primary Settlement\n
\n

\n Routing 021000021 · Checking account · Daily automated\n transfer\n

\n
\n
\n \n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n @for (payout of payouts; track payout.id) {\n \n \n \n \n \n \n \n \n \n \n }\n \n
Payout IDInitiated / ExpectedDestinationGrossFeesNet AmountStatus\n Actions\n
{{ payout.id }}\n
{{ payout.initiatedDate }}
\n
{{ payout.arrivalDate }}
\n 		\n
\n \n {{ payout.destination }}\n
\n 		\n {{ payout.grossAmount }}\n \n {{ payout.feeAmount }}\n {{ payout.netAmount }}\n \n {{ statusLabel(payout.status) }}\n \n \n \n \n \n Open actions for {{ payout.id }}\n \n \n \n \n View itemized breakdown\n \n \n \n Download receipt\n \n \n \n \n Trace transfer\n \n \n \n
\n
\n\n
\n

\n Showing 6 of\n 128 payout batches\n

\n
\n \n \n
\n
\n
\n `,\n})\nexport class UiPayoutsManagementTableComponent {\n protected readonly Building2 = Building2\n protected readonly CalendarClock = CalendarClock\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Download = Download\n protected readonly ExternalLink = ExternalLink\n protected readonly FileText = FileText\n protected readonly Landmark = Landmark\n protected readonly MoreHorizontal = MoreHorizontal\n protected readonly Zap = Zap\n\n @Input('class') className?: string\n\n protected readonly summary = summary\n protected readonly payouts = payouts\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n summaryIconClass(item: SummaryItem): string {\n return cn('flex size-8 items-center justify-center rounded-md', item.iconClass)\n }\n\n asIcon(icon: unknown): never {\n return icon as never\n }\n\n statusClass(status: PayoutStatus): string {\n return cn('font-medium', statusConfig[status].className)\n }\n\n statusLabel(status: PayoutStatus): string {\n return statusConfig[status].label\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/payouts-management-table/payouts-management-table.component.ts" }, { "path": "packages/registry-angular/blocks/payouts-management-table/index.ts", "content": "export {\n UiPayoutsManagementTableComponent,\n type PayoutStatus,\n type PayoutBatch,\n} from './payouts-management-table.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/payouts-management-table/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/dropdown-menu.json", "https://uipkge.dev/r/angular/table.json" ], "description": "Merchant payout management page: automated payout schedule controls, instant payout trigger, summary balance cards for available, in-transit, and rolling reserve balances, verified settlement bank account destination card, and an itemized batch transfer history table with gross/fee/net amounts, status badges, and action menus.", "categories": [ "finance", "app", "billing" ] }