{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "transaction-feed", "title": "Transaction Feed", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/transaction-feed/transaction-feed.component.ts", "content": "// Brex/Ramp-style real-time corporate transaction feed with expense categorization,\n// summary financial stat cards, search and filter toolbar, cardholder metadata, receipt\n// attachment triggers, and row action menus. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n Building2,\n Car,\n Clock,\n Cloud,\n CreditCard,\n Download,\n Eye,\n FileCheck,\n GitBranch,\n LucideAngularModule,\n Mail,\n MessageSquare,\n MoreHorizontal,\n Palette,\n Paperclip,\n Plane,\n Plus,\n Receipt,\n RotateCcw,\n Search,\n ShieldAlert,\n TrendingUp,\n Upload,\n Utensils,\n type LucideIconData,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent, UiAvatarImageComponent } from '@/ui/avatar/avatar.component'\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 { UiInputComponent } from '@/ui/input/input.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\nexport type TransactionStatus = 'cleared' | 'pending' | 'receipt_needed'\nexport type CategoryKey = 'cloud' | 'travel' | 'saas' | 'transport' | 'office' | 'meals'\n\nexport interface Cardholder {\n name: string\n avatar: string\n initials: string\n cardLast4: string\n cardType: 'Virtual' | 'Physical'\n}\n\nexport interface Transaction {\n id: string\n merchant: string\n merchantNote: string\n merchantIcon: LucideIconData\n category: string\n categoryKey: CategoryKey\n cardholder: Cardholder\n date: string\n status: TransactionStatus\n statusLabel: string\n amount: string\n isRefund: boolean\n hasReceipt: boolean\n receiptFileName?: string\n}\n\nconst categoryStyles: Record = {\n cloud: 'bg-info/10 text-info border-info/20',\n travel: 'bg-chart-1/10 text-chart-1 border-chart-1/20',\n saas: 'bg-chart-2/10 text-chart-2 border-chart-2/20',\n transport: 'bg-warning/10 text-warning border-warning/20',\n office: 'bg-chart-3/10 text-chart-3 border-chart-3/20',\n meals: 'bg-success/10 text-success border-success/20',\n}\n\nconst statusStyles: Record = {\n cleared: 'bg-success/10 text-success border-success/20',\n pending: 'bg-info/10 text-info border-info/20',\n receipt_needed: 'bg-warning/10 text-warning border-warning/20',\n}\n\nconst statusDots: Record = {\n cleared: 'bg-success',\n pending: 'bg-info',\n receipt_needed: 'bg-warning',\n}\n\nconst transactions: Transaction[] = [\n {\n id: 'tx-01',\n merchant: 'AWS Cloud Services',\n merchantNote: 'Production us-east-1 compute & S3',\n merchantIcon: Cloud,\n category: 'Cloud Hosting',\n categoryKey: 'cloud',\n cardholder: {\n name: 'Elena Rostova',\n avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&auto=format&fit=crop&q=80',\n initials: 'ER',\n cardLast4: '4892',\n cardType: 'Virtual',\n },\n date: 'Aug 21, 2026 · 14:28',\n status: 'cleared',\n statusLabel: 'Cleared',\n amount: '-$1,420.00',\n isRefund: false,\n hasReceipt: true,\n receiptFileName: 'aws-invoice-aug-2026.pdf',\n },\n {\n id: 'tx-02',\n merchant: 'Delta Air Lines',\n merchantNote: 'SFO → JFK nonstop (Q3 Conf)',\n merchantIcon: Plane,\n category: 'Travel',\n categoryKey: 'travel',\n cardholder: {\n name: 'Marcus Chen',\n avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&auto=format&fit=crop&q=80',\n initials: 'MC',\n cardLast4: '3190',\n cardType: 'Physical',\n },\n date: 'Aug 21, 2026 · 11:15',\n status: 'pending',\n statusLabel: 'Pending',\n amount: '-$849.00',\n isRefund: false,\n hasReceipt: true,\n receiptFileName: 'delta-eticket-dl8932.pdf',\n },\n {\n id: 'tx-03',\n merchant: 'GitHub Enterprise',\n merchantNote: '42 Enterprise team seats',\n merchantIcon: GitBranch,\n category: 'SaaS',\n categoryKey: 'saas',\n cardholder: {\n name: 'Amara Okafor',\n avatar: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=100&auto=format&fit=crop&q=80',\n initials: 'AO',\n cardLast4: '9455',\n cardType: 'Virtual',\n },\n date: 'Aug 20, 2026 · 09:00',\n status: 'cleared',\n statusLabel: 'Cleared',\n amount: '-$882.00',\n isRefund: false,\n hasReceipt: true,\n receiptFileName: 'github-inv-aug2026.pdf',\n },\n {\n id: 'tx-04',\n merchant: 'Uber for Business',\n merchantNote: 'Client dinner return ride',\n merchantIcon: Car,\n category: 'Transport',\n categoryKey: 'transport',\n cardholder: {\n name: 'Sarah Jenkins',\n avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&auto=format&fit=crop&q=80',\n initials: 'SJ',\n cardLast4: '6021',\n cardType: 'Physical',\n },\n date: 'Aug 19, 2026 · 22:45',\n status: 'receipt_needed',\n statusLabel: 'Receipt Needed',\n amount: '-$48.50',\n isRefund: false,\n hasReceipt: false,\n },\n {\n id: 'tx-05',\n merchant: 'Figma Professional',\n merchantNote: 'Design team organization plan',\n merchantIcon: Palette,\n category: 'SaaS',\n categoryKey: 'saas',\n cardholder: {\n name: 'Priya Nair',\n avatar: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?w=100&auto=format&fit=crop&q=80',\n initials: 'PN',\n cardLast4: '7712',\n cardType: 'Virtual',\n },\n date: 'Aug 19, 2026 · 16:30',\n status: 'cleared',\n statusLabel: 'Cleared',\n amount: '-$360.00',\n isRefund: false,\n hasReceipt: true,\n receiptFileName: 'figma-subscription-receipt.pdf',\n },\n {\n id: 'tx-06',\n merchant: 'WeWork Coworking',\n merchantNote: 'NYC satellite team hot desks',\n merchantIcon: Building2,\n category: 'Office',\n categoryKey: 'office',\n cardholder: {\n name: 'Jonas Weber',\n avatar: 'https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?w=100&auto=format&fit=crop&q=80',\n initials: 'JW',\n cardLast4: '1109',\n cardType: 'Physical',\n },\n date: 'Aug 18, 2026 · 10:00',\n status: 'receipt_needed',\n statusLabel: 'Receipt Needed',\n amount: '-$1,250.00',\n isRefund: false,\n hasReceipt: false,\n },\n {\n id: 'tx-07',\n merchant: 'Google Workspace',\n merchantNote: 'Security & suite - 55 users',\n merchantIcon: Mail,\n category: 'SaaS',\n categoryKey: 'saas',\n cardholder: {\n name: 'Elena Rostova',\n avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&auto=format&fit=crop&q=80',\n initials: 'ER',\n cardLast4: '4892',\n cardType: 'Virtual',\n },\n date: 'Aug 17, 2026 · 08:30',\n status: 'cleared',\n statusLabel: 'Cleared',\n amount: '-$660.00',\n isRefund: false,\n hasReceipt: true,\n receiptFileName: 'google-workspace-statement.pdf',\n },\n {\n id: 'tx-08',\n merchant: 'Slack Pro',\n merchantNote: 'Vendor annual prepay refund adjustment',\n merchantIcon: MessageSquare,\n category: 'SaaS',\n categoryKey: 'saas',\n cardholder: {\n name: 'Amara Okafor',\n avatar: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=100&auto=format&fit=crop&q=80',\n initials: 'AO',\n cardLast4: '9455',\n cardType: 'Virtual',\n },\n date: 'Aug 16, 2026 · 15:40',\n status: 'cleared',\n statusLabel: 'Cleared',\n amount: '+$5,000.00',\n isRefund: true,\n hasReceipt: true,\n receiptFileName: 'slack-credit-adjustment.pdf',\n },\n {\n id: 'tx-09',\n merchant: 'Sweetgreen Catering',\n merchantNote: 'Quarterly all-hands team lunch',\n merchantIcon: Utensils,\n category: 'Meals',\n categoryKey: 'meals',\n cardholder: {\n name: 'Marcus Chen',\n avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&auto=format&fit=crop&q=80',\n initials: 'MC',\n cardLast4: '3190',\n cardType: 'Physical',\n },\n date: 'Aug 15, 2026 · 12:15',\n status: 'receipt_needed',\n statusLabel: 'Receipt Needed',\n amount: '-$320.00',\n isRefund: false,\n hasReceipt: false,\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-transaction-feed, [ui-transaction-feed]',\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 UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiAvatarImageComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n UiInputComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiTableComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n \n
\n
\n

Transactions

\n

\n Real-time ledger of card expenses, wire transfers, and subscription charges.\n

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

Total Spent This Month

\n
\n \n
\n
\n

$42,850.00

\n
\n \n \n +8.4%\n \n vs previous month\n
\n
\n
\n\n
\n
\n
\n

Pending Approvals

\n
\n \n
\n
\n

6 transactions

\n

$3,410.00 requiring review

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

Missing Receipts

\n \n Action required\n \n
\n

3

\n

Total $1,618.50 unverified

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

Average Transaction

\n
\n \n
\n
\n

$185.20

\n

Across 231 card charges

\n
\n
\n
\n\n \n \n
\n
\n \n \n
\n\n
\n \n \n \n All Categories\n Cloud Hosting\n Software & SaaS\n Travel\n Meals & Dining\n Office\n Transport\n \n \n\n \n \n \n This Month\n Last 30 Days\n Last 90 Days\n Year to Date\n All Time\n \n \n\n \n \n \n All Statuses\n Cleared\n Pending\n Receipt Needed\n \n \n
\n
\n\n @if (isFiltered()) {\n \n \n Reset filters\n \n }\n
\n\n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n @for (tx of filteredTransactions(); track tx.id) {\n \n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n \n }\n\n @if (filteredTransactions().length === 0) {\n \n \n \n }\n \n
Merchant / NoteCategoryCardholderDate & TimeStatusAmountReceipt\n Actions\n
\n
\n \n \n
\n
\n

{{ tx.merchant }}

\n

{{ tx.merchantNote }}

\n
\n \n 		\n \n {{ tx.category }}\n \n \n
\n \n \n {{ tx.cardholder.initials }}\n \n
\n

{{ tx.cardholder.name }}

\n

\n ••••\n {{ tx.cardholder.cardLast4 }}\n

\n
\n
\n 		\n {{ tx.date }}\n \n \n \n {{ tx.statusLabel }}\n \n \n {{ tx.amount }}\n \n
\n @if (tx.hasReceipt) {\n \n \n Attached\n \n } @else {\n \n \n Upload\n \n }\n
\n 		\n \n \n \n Open actions for {{ tx.merchant }}\n \n \n \n \n View Details\n \n \n \n {{ tx.hasReceipt ? 'View Receipt' : 'Attach Receipt' }}\n \n \n \n Match Invoice\n \n \n \n \n Dispute\n \n \n \n
\n
\n \n

No transactions match your filters

\n

\n Try clearing your search query or reset category/status\n

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

\n Showing {{ filteredTransactions().length }} of\n {{ allTransactions.length }} transactions\n

\n
\n \n \n
\n
\n
\n \n `,\n})\nexport class UiTransactionFeedComponent {\n protected readonly Clock = Clock\n protected readonly CreditCard = CreditCard\n protected readonly Download = Download\n protected readonly Eye = Eye\n protected readonly FileCheck = FileCheck\n protected readonly MoreHorizontal = MoreHorizontal\n protected readonly Paperclip = Paperclip\n protected readonly Plus = Plus\n protected readonly Receipt = Receipt\n protected readonly RotateCcw = RotateCcw\n protected readonly Search = Search\n protected readonly ShieldAlert = ShieldAlert\n protected readonly TrendingUp = TrendingUp\n protected readonly Upload = Upload\n\n protected readonly cn = cn\n protected readonly categoryStyles = categoryStyles\n protected readonly statusStyles = statusStyles\n protected readonly statusDots = statusDots\n protected readonly allTransactions = transactions\n\n @Input('class') className?: string\n\n readonly search = signal('')\n readonly categoryFilter = signal('all')\n readonly dateRangeFilter = signal('this_month')\n readonly statusFilter = signal('all')\n\n readonly isFiltered = computed(\n () =>\n this.search().trim() !== '' ||\n this.categoryFilter() !== 'all' ||\n this.dateRangeFilter() !== 'this_month' ||\n this.statusFilter() !== 'all',\n )\n\n readonly filteredTransactions = computed(() => {\n const query = this.search().trim().toLowerCase()\n return transactions.filter((tx) => {\n const matchesCategory = this.categoryFilter() === 'all' || tx.categoryKey === this.categoryFilter()\n const matchesStatus = this.statusFilter() === 'all' || tx.status === this.statusFilter()\n const matchesQuery =\n !query ||\n tx.merchant.toLowerCase().includes(query) ||\n tx.merchantNote.toLowerCase().includes(query) ||\n tx.category.toLowerCase().includes(query) ||\n tx.cardholder.name.toLowerCase().includes(query) ||\n tx.cardholder.cardLast4.includes(query)\n return matchesCategory && matchesStatus && matchesQuery\n })\n })\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n resetFilters(): void {\n this.search.set('')\n this.categoryFilter.set('all')\n this.dateRangeFilter.set('this_month')\n this.statusFilter.set('all')\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/transaction-feed/transaction-feed.component.ts" }, { "path": "packages/registry-angular/blocks/transaction-feed/index.ts", "content": "export {\n UiTransactionFeedComponent,\n type Cardholder,\n type CategoryKey,\n type Transaction,\n type TransactionStatus,\n} from './transaction-feed.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/transaction-feed/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "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/input.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/table.json" ], "description": "Brex/Ramp-style real-time corporate transaction feed with expense categorization, summary financial stat cards, search and filter toolbar, cardholder metadata, receipt attachment triggers, and row action menus.", "categories": [ "finance", "app", "billing" ] }