61:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:T3c6e,'use client' import { Building2, Calendar, CheckCircle2, Clock, CreditCard, DollarSign, Download, Landmark, Receipt, Send, ShieldCheck, } from 'lucide-react' import { cn } from '@/lib/utils' import { Avatar, AvatarFallback } from '@/components/ui/avatar' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table' export interface EmployeeRecord { id: string name: string role: string department: string payType: 'Salary' | 'Hourly' hours: string grossPay: string deductions: string deductionsDetail: string netPay: string paymentMethod: string bankDetail: string } const timelineSteps = [ { step: 1, title: 'ACH Debit Date', date: 'Wednesday, Aug 19, 2026', time: '5:00 PM EST', description: 'Company Operating Account (•••• 9021) debited for payroll & tax liability.', status: 'Completed', statusClass: 'bg-success/10 text-success border-success/20', icon: CheckCircle2, }, { step: 2, title: 'Bank Processing', date: 'Thursday, Aug 20, 2026', time: 'Automated Clearing', description: 'Federal Reserve NACHA batch transmission, ACH clearing, and tax escrow lock.', status: 'In Transit', statusClass: 'bg-info/10 text-info border-info/20', icon: Landmark, }, { step: 3, title: 'Employee Payday', date: 'Friday, Aug 21, 2026', time: '12:01 AM Local', description: 'Net funds settled across 42 employee accounts and electronic paystubs released.', status: 'Target Payday', statusClass: 'bg-success/10 text-success border-success/20', icon: DollarSign, }, ] const summaryCards = [ { label: 'Total Company Cost', value: '$184,250.00', badge: 'Cycle #16', description: 'Gross pay ($169,670.00) + Employer taxes ($14,580.00)', icon: Building2, }, { label: 'Net Direct Deposit Pay', value: '$138,420.00', badge: '42 Employees', description: 'Disbursed to 42 employees via automated 100% direct deposit', icon: CreditCard, }, { label: 'Employee Withholdings', value: '$31,250.00', badge: 'Federal & State Tax', description: '$31,250.00 · Federal & State Tax, FICA & benefit deductions', icon: Receipt, }, { label: 'Employer Payroll Taxes', value: '$14,580.00', badge: 'FICA & FUTA', description: '$14,580.00 · FICA & FUTA, SUTA employer contributions', icon: ShieldCheck, }, ] const employees: EmployeeRecord[] = [ { id: 'emp-1', name: 'Elena Rostova', role: 'Principal Engineer', department: 'Engineering', payType: 'Salary', hours: '80.0 hrs', grossPay: '$8,750.00', deductions: '-$2,140.00', deductionsDetail: 'Pre-tax 401k & Health', netPay: '$6,610.00', paymentMethod: 'Direct Deposit', bankDetail: 'Chase •••• 4892', }, { id: 'emp-2', name: 'Marcus Vance', role: 'Staff Architect', department: 'Engineering', payType: 'Salary', hours: '80.0 hrs', grossPay: '$8,125.00', deductions: '-$1,980.00', deductionsDetail: 'Pre-tax 401k & HSA', netPay: '$6,145.00', paymentMethod: 'Direct Deposit', bankDetail: 'Wells Fargo •••• 3109', }, { id: 'emp-3', name: 'David Chen', role: 'Senior Full-Stack', department: 'Engineering', payType: 'Salary', hours: '80.0 hrs', grossPay: '$6,875.00', deductions: '-$1,650.00', deductionsDetail: 'Pre-tax 401k & Dental', netPay: '$5,225.00', paymentMethod: 'Direct Deposit', bankDetail: 'Bank of America •••• 7741', }, { id: 'emp-4', name: 'Sarah Jenkins', role: 'Frontend Specialist', department: 'Engineering', payType: 'Hourly', hours: '80.0 hrs', grossPay: '$5,492.50', deductions: '-$1,280.00', deductionsDetail: 'Medical & Vision', netPay: '$4,212.50', paymentMethod: 'Direct Deposit', bankDetail: 'Citibank •••• 9018', }, { id: 'emp-5', name: 'Alex Rivera', role: 'Product Designer', department: 'Design', payType: 'Salary', hours: '80.0 hrs', grossPay: '$6,250.00', deductions: '-$1,490.00', deductionsDetail: 'Pre-tax 401k & Health', netPay: '$4,760.00', paymentMethod: 'Direct Deposit', bankDetail: 'SVB •••• 6523', }, ] function initials(name: string) { return name .split(' ') .map((part) => part[0]) .slice(0, 2) .join('') .toUpperCase() } export function PayrollRunSummary({ className }: { className?: string }) { return (

{/* Header Section */}

Payroll Run Summary

Pay Date: Aug 21

{/* 4 Primary Metric Cards */}

{summaryCards.map((card) => ( {card.label} {card.badge}

{card.value}

{card.description}

))}

{/* Direct Deposit Funding Timeline Bar */}

ACH 2-Day Settlement Window

{timelineSteps.map((item, idx) => { const Icon = item.icon return (

{item.step}

{item.title}

{item.status}

{item.date}

{item.time}

{item.description}

{idx < timelineSteps.length - 1 && ( Next: Step {idx + 2} )}

) })}

{/* Employee Payroll Table */}

Employee Compensation Breakdown

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

42 Total Employees Approved & Ready to Submit

Employee Pay Type Hours Gross Pay Total Deductions Net Pay Payment Method {employees.map((emp) => (

{initials(emp.name)}

{emp.name} {emp.department}

{emp.role}

{emp.payType} {emp.hours} {emp.grossPay}

{emp.deductions} {emp.deductionsDetail}

{emp.netPay}

))}

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

) } 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L61",null,{"namespace":"@registrydirectory","registryDependencies":["https://uipkge.dev/r/react/avatar.json","https://uipkge.dev/r/react/badge.json","https://uipkge.dev/r/react/button.json","https://uipkge.dev/r/react/card.json","https://uipkge.dev/r/react/table.json"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"packages/registry-react/blocks/payroll-run-summary/PayrollRunSummary.tsx","content":"$63","type":"registry:block","target":"~/components/blocks/PayrollRunSummary.tsx"}],"className":"h-[70svh] min-h-80"}]]}]