{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "invoices-list", "title": "Invoices List", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/invoices-list/invoices-list.component.ts", "content": "import { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { Check, Download, Eye, LucideAngularModule, MoreHorizontal, Plus } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } 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 {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\nexport type InvoiceStatus = 'paid' | 'pending' | 'overdue' | 'draft'\n\nexport interface Invoice {\n id: string\n number: string\n client: string\n issued: string\n due: string\n amount: string\n status: InvoiceStatus\n}\n\nconst summary = [\n { label: 'Total outstanding', value: '$12,480.00', note: '5 unpaid invoices', tone: '' },\n { label: 'Paid this month', value: '$28,930.00', note: '+12% vs last month', tone: '' },\n { label: 'Overdue', value: '$3,120.00', note: '2 invoices past due', tone: 'text-destructive' },\n]\n\nconst statusClass: Record = {\n paid: 'bg-success/10 text-success',\n pending: 'bg-warning/10 text-warning',\n overdue: 'bg-destructive/10 text-destructive',\n draft: '',\n}\n\nconst invoices: Invoice[] = [\n {\n id: 'i1',\n number: 'INV-2026-0142',\n client: 'Acme Corp',\n issued: 'Aug 18, 2026',\n due: 'Sep 1, 2026',\n amount: '$4,800.00',\n status: 'pending',\n },\n {\n id: 'i2',\n number: 'INV-2026-0141',\n client: 'Northwind Traders',\n issued: 'Aug 15, 2026',\n due: 'Aug 30, 2026',\n amount: '$2,350.00',\n status: 'overdue',\n },\n {\n id: 'i3',\n number: 'INV-2026-0140',\n client: 'Globex Industries',\n issued: 'Aug 12, 2026',\n due: 'Sep 10, 2026',\n amount: '$1,200.00',\n status: 'draft',\n },\n {\n id: 'i4',\n number: 'INV-2026-0139',\n client: 'Helios Labs',\n issued: 'Aug 8, 2026',\n due: 'Aug 22, 2026',\n amount: '$6,750.00',\n status: 'paid',\n },\n {\n id: 'i5',\n number: 'INV-2026-0138',\n client: 'Acme Corp',\n issued: 'Aug 5, 2026',\n due: 'Aug 19, 2026',\n amount: '$770.00',\n status: 'paid',\n },\n {\n id: 'i6',\n number: 'INV-2026-0137',\n client: 'Vertex Media',\n issued: 'Jul 30, 2026',\n due: 'Aug 13, 2026',\n amount: '$3,120.00',\n status: 'overdue',\n },\n {\n id: 'i7',\n number: 'INV-2026-0136',\n client: 'Initech Systems',\n issued: 'Jul 24, 2026',\n due: 'Aug 7, 2026',\n amount: '$5,400.00',\n status: 'paid',\n },\n]\n\n/**\n * InvoicesList -- the React block, 1:1: header with a New invoice action, a three-card\n * summary strip (total outstanding, paid this month, overdue), and an invoice table pairing\n * monospace invoice numbers with avatar clients, issue/due dates, tabular-nums amounts,\n * color-coded status badges, and a per-row View/Download/Mark-as-paid dropdown, closed by\n * a pagination hint. Data is stubbed inline; swap for your source.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-invoices-list, [ui-invoices-list]',\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 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

Invoices

\n

Manage billing for all of your clients.

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

{{ item.label }}

\n

{{ item.value }}

\n

{{ item.note }}

\n
\n
\n }\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n @for (invoice of invoices; track invoice.id) {\n \n \n \n \n \n \n \n \n \n }\n \n
InvoiceClientIssuedDueAmountStatusActions
{{ invoice.number }}\n
\n \n {{ initials(invoice.client) }}\n \n {{ invoice.client }}\n
\n 		{{ invoice.issued }}{{ invoice.due }}{{ invoice.amount }}\n \n {{ invoice.status }}\n \n \n \n \n \n Open actions for {{ invoice.number }}\n \n \n \n \n View\n \n \n \n Download\n \n \n \n \n Mark as paid\n \n \n \n
\n
\n\n
\n

Showing {{ invoices.length }} of 42 invoices

\n
\n \n \n
\n
\n
\n `,\n})\nexport class UiInvoicesListComponent {\n protected readonly Check = Check\n protected readonly Download = Download\n protected readonly Eye = Eye\n protected readonly MoreHorizontal = MoreHorizontal\n protected readonly Plus = Plus\n\n protected readonly summary = summary\n protected readonly invoices = invoices\n\n @Input('class') className?: string\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n badgeClass(status: InvoiceStatus): string {\n return cn('capitalize', statusClass[status])\n }\n\n initials(name: string): string {\n return name\n .split(' ')\n .map((part) => part[0])\n .slice(0, 2)\n .join('')\n .toUpperCase()\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/invoices-list/invoices-list.component.ts" }, { "path": "packages/registry-angular/blocks/invoices-list/index.ts", "content": "export { UiInvoicesListComponent, type Invoice, type InvoiceStatus } from './invoices-list.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/invoices-list/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/table.json" ], "description": "Invoice history page: header with a New invoice action, a three-card summary strip (total outstanding, paid this month, overdue), and an invoice table pairing monospace invoice numbers with avatar clients, issue/due dates, tabular-nums amounts, color-coded status badges, and a per-row View/Download/Mark-as-paid dropdown, closed by a pagination hint. Data is stubbed inline; swap for your source.", "categories": [ "finance", "app", "billing" ] }