{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "payroll-run-summary", "title": "Payroll Run Summary", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/payroll-run-summary/payroll-run-summary.component.ts", "content": "import { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport {\n Building2,\n Calendar,\n CheckCircle2,\n Clock,\n CreditCard,\n DollarSign,\n Download,\n Landmark,\n LucideAngularModule,\n Receipt,\n Send,\n ShieldCheck,\n} 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 {\n UiCardComponent,\n UiCardContentComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\nexport interface EmployeeRecord {\n id: string\n name: string\n role: string\n department: string\n payType: 'Salary' | 'Hourly'\n hours: string\n grossPay: string\n deductions: string\n deductionsDetail: string\n netPay: string\n paymentMethod: string\n bankDetail: string\n}\n\ninterface TimelineStep {\n step: number\n title: string\n date: string\n time: string\n description: string\n status: string\n statusClass: string\n icon: unknown\n footer: string\n}\n\ninterface SummaryCard {\n label: string\n value: string\n badge: string\n description: string\n}\n\nconst timelineSteps: TimelineStep[] = [\n {\n step: 1,\n title: 'ACH Debit Date',\n date: 'Wednesday, Aug 19, 2026',\n time: '5:00 PM EST',\n description: 'Company Operating Account (•••• 9021) debited for payroll & tax liability.',\n status: 'Completed',\n statusClass: 'bg-success/10 text-success border-success/20',\n icon: CheckCircle2,\n footer: 'Verified',\n },\n {\n step: 2,\n title: 'Bank Processing',\n date: 'Thursday, Aug 20, 2026',\n time: 'Automated Clearing',\n description: 'Federal Reserve NACHA batch transmission, ACH clearing, and tax escrow lock.',\n status: 'In Transit',\n statusClass: 'bg-info/10 text-info border-info/20',\n icon: Landmark,\n footer: 'Processing',\n },\n {\n step: 3,\n title: 'Employee Payday',\n date: 'Friday, Aug 21, 2026',\n time: '12:01 AM Local',\n description: 'Net funds settled across 42 employee accounts and electronic paystubs released.',\n status: 'Target Payday',\n statusClass: 'bg-success/10 text-success border-success/20',\n icon: DollarSign,\n footer: 'Scheduled',\n },\n]\n\nconst summaryCards: SummaryCard[] = [\n {\n label: 'Total Company Cost',\n value: '$184,250.00',\n badge: 'Cycle #16',\n description: 'Gross pay ($169,670.00) + Employer taxes ($14,580.00)',\n },\n {\n label: 'Net Direct Deposit Pay',\n value: '$138,420.00',\n badge: '42 Employees',\n description: 'Disbursed to 42 employees via automated 100% direct deposit',\n },\n {\n label: 'Employee Withholdings',\n value: '$31,250.00',\n badge: 'Federal & State Tax',\n description: '$31,250.00 · Federal & State Tax, FICA & benefit deductions',\n },\n {\n label: 'Employer Payroll Taxes',\n value: '$14,580.00',\n badge: 'FICA & FUTA',\n description: '$14,580.00 · FICA & FUTA, SUTA employer contributions',\n },\n]\n\nconst employees: EmployeeRecord[] = [\n {\n id: 'emp-1',\n name: 'Elena Rostova',\n role: 'Principal Engineer',\n department: 'Engineering',\n payType: 'Salary',\n hours: '80.0 hrs',\n grossPay: '$8,750.00',\n deductions: '-$2,140.00',\n deductionsDetail: 'Pre-tax 401k & Health',\n netPay: '$6,610.00',\n paymentMethod: 'Direct Deposit',\n bankDetail: 'Chase •••• 4892',\n },\n {\n id: 'emp-2',\n name: 'Marcus Vance',\n role: 'Staff Architect',\n department: 'Engineering',\n payType: 'Salary',\n hours: '80.0 hrs',\n grossPay: '$8,125.00',\n deductions: '-$1,980.00',\n deductionsDetail: 'Pre-tax 401k & HSA',\n netPay: '$6,145.00',\n paymentMethod: 'Direct Deposit',\n bankDetail: 'Wells Fargo •••• 3109',\n },\n {\n id: 'emp-3',\n name: 'David Chen',\n role: 'Senior Full-Stack',\n department: 'Engineering',\n payType: 'Salary',\n hours: '80.0 hrs',\n grossPay: '$6,875.00',\n deductions: '-$1,650.00',\n deductionsDetail: 'Pre-tax 401k & Dental',\n netPay: '$5,225.00',\n paymentMethod: 'Direct Deposit',\n bankDetail: 'Bank of America •••• 7741',\n },\n {\n id: 'emp-4',\n name: 'Sarah Jenkins',\n role: 'Frontend Specialist',\n department: 'Engineering',\n payType: 'Hourly',\n hours: '80.0 hrs',\n grossPay: '$5,492.50',\n deductions: '-$1,280.00',\n deductionsDetail: 'Medical & Vision',\n netPay: '$4,212.50',\n paymentMethod: 'Direct Deposit',\n bankDetail: 'Citibank •••• 9018',\n },\n {\n id: 'emp-5',\n name: 'Alex Rivera',\n role: 'Product Designer',\n department: 'Design',\n payType: 'Salary',\n hours: '80.0 hrs',\n grossPay: '$6,250.00',\n deductions: '-$1,490.00',\n deductionsDetail: 'Pre-tax 401k & Health',\n netPay: '$4,760.00',\n paymentMethod: 'Direct Deposit',\n bankDetail: 'SVB •••• 6523',\n },\n]\n\nfunction 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/**\n * PayrollRunSummary -- the React block, 1:1: cycle header with approval badge and submit\n * controls, four payroll metric cards, a direct-deposit ACH funding timeline, and an\n * itemized employee compensation table with avatar, pay-type badge, deductions and net pay.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-payroll-run-summary, [ui-payroll-run-summary]',\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 UiCardHeaderComponent,\n UiCardTitleComponent,\n UiTableComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n
\n
\n
\n

Payroll Run Summary

\n \n \n Approved & Ready to Submit\n \n
\n

\n \n \n Pay Period: Aug 01, 2026 – Aug 15, 2026\n \n Pay Date: Aug 21 \n

\n
\n\n
\n \n \n
\n
\n\n
\n @for (card of summaryCards; track card.label) {\n
\n
\n

{{ card.label }}

\n {{ card.badge }}\n
\n
\n
{{ card.value }}
\n

{{ card.description }}

\n
\n
\n }\n
\n\n
\n
\n
\n
\n \n

Direct Deposit Funding Timeline

\n
\n \n ACH 2-Day Settlement Window\n \n
\n
\n
\n
\n @for (item of timelineSteps; track item.step; let idx = $index) {\n
\n
\n
\n
\n \n {{ item.step }}\n
\n {{ item.title }}\n
\n {{ item.status }}\n
\n
\n

{{ item.date }}

\n

{{ item.time }}

\n
\n

{{ item.description }}

\n
\n
\n \n \n {{ item.footer }}\n \n @if (idx < timelineSteps.length - 1) {\n \n }\n
\n
\n }\n
\n
\n
\n\n
\n
\n
\n

Employee Compensation Breakdown

\n

\n 5 of 42 employees shown in active batch · 80.0 standard cycle base hours\n

\n
\n
\n 42 Total Employees\n \n Approved & Ready to Submit\n \n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n @for (emp of employees; track emp.id) {\n \n \n \n \n \n \n \n \n \n }\n \n
EmployeePay TypeHoursGross PayTotal DeductionsNet PayPayment Method
\n
\n \n {{ initials(emp.name) }}\n \n
\n
\n {{ emp.name }}\n \n {{ emp.department }}\n \n
\n {{ emp.role }}\n
\n
\n 		\n \n {{ emp.payType }}\n \n \n {{ emp.hours }}\n {{ emp.grossPay }}\n
\n {{ emp.deductions }}\n {{ emp.deductionsDetail }}\n
\n 		\n {{ emp.netPay }}\n \n
\n \n
\n {{ emp.paymentMethod }}\n {{ emp.bankDetail }}\n
\n
\n
\n
\n\n
\n

\n Showing 5 of 42 employees · Reconciliation verified against IRS Form 941 schedules\n

\n
\n \n \n
\n
\n
\n\n
\n \n \n \n \n
\n
\n `,\n})\nexport class UiPayrollRunSummaryComponent {\n protected readonly Calendar = Calendar\n protected readonly Clock = Clock\n protected readonly Download = Download\n protected readonly Landmark = Landmark\n protected readonly Send = Send\n protected readonly Building2 = Building2\n protected readonly CreditCard = CreditCard\n protected readonly Receipt = Receipt\n protected readonly ShieldCheck = ShieldCheck\n\n @Input('class') className?: string\n\n protected readonly summaryCards = summaryCards\n protected readonly timelineSteps = timelineSteps\n protected readonly employees = employees\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n initials(name: string): string {\n return initials(name)\n }\n\n asIcon(icon: unknown): never {\n return icon as never\n }\n\n timelineStatusClass(item: TimelineStep): string {\n return cn('text-xs font-medium capitalize', item.statusClass)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/payroll-run-summary/payroll-run-summary.component.ts" }, { "path": "packages/registry-angular/blocks/payroll-run-summary/index.ts", "content": "export { UiPayrollRunSummaryComponent, type EmployeeRecord } from './payroll-run-summary.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/payroll-run-summary/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/table.json" ], "description": "Gusto/Rippling style bi-weekly company payroll execution preview and tax reconciliation: cycle header with approval badge and submission controls, 4 primary payroll metric cards (company cost, net pay, employee withholdings, employer taxes), direct deposit ACH funding timeline, and itemized employee payroll table.", "categories": [ "finance", "app", "billing" ] }