{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "payroll-run-summary",
  "title": "Payroll Run Summary",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/payroll-run-summary/PayrollRunSummary.tsx",
      "content": "'use client'\n\nimport {\n  Building2,\n  Calendar,\n  CheckCircle2,\n  Clock,\n  CreditCard,\n  DollarSign,\n  Download,\n  Landmark,\n  Receipt,\n  Send,\n  ShieldCheck,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\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\nconst timelineSteps = [\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  },\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  },\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  },\n]\n\nconst summaryCards = [\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    icon: Building2,\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    icon: CreditCard,\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    icon: Receipt,\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    icon: ShieldCheck,\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) {\n  return name\n    .split(' ')\n    .map((part) => part[0])\n    .slice(0, 2)\n    .join('')\n    .toUpperCase()\n}\n\nexport function PayrollRunSummary({ className }: { className?: string }) {\n  return (\n    <div data-slot=\"payroll-run-summary\" className={cn('w-full space-y-6', className)}>\n      {/* Header Section */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n        <div className=\"space-y-1.5\">\n          <div className=\"flex flex-wrap items-center gap-3\">\n            <h2 className=\"text-foreground text-2xl font-bold tracking-tight\">Payroll Run Summary</h2>\n            <Badge wrap variant=\"outline\" className=\"border-success/20 bg-success/10 text-success gap-1.5 font-medium\">\n              <span className=\"bg-success size-1.5 rounded-full\" aria-hidden=\"true\" />\n              Approved & Ready to Submit\n            </Badge>\n          </div>\n          <p className=\"text-muted-foreground flex flex-wrap items-center gap-2 text-sm\">\n            <span className=\"inline-flex items-center gap-1.5\">\n              <Calendar className=\"size-4\" aria-hidden=\"true\" />\n              Pay Period: <strong className=\"text-foreground font-medium\">Aug 01, 2026 – Aug 15, 2026</strong>\n            </span>\n            <span>\n              Pay Date: <strong className=\"text-foreground font-medium\">Aug 21</strong>\n            </span>\n          </p>\n        </div>\n\n        <div className=\"flex flex-wrap items-center gap-2.5\">\n          <Button aria-label=\"Download attachment\" variant=\"outline\">\n            <Download className=\"size-4\" aria-hidden=\"true\" />\n            Export Payroll CSV\n          </Button>\n          <Button>\n            <Send className=\"size-4\" aria-hidden=\"true\" />\n            Submit Payroll ($184,250.00)\n          </Button>\n        </div>\n      </div>\n\n      {/* 4 Primary Metric Cards */}\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        {summaryCards.map((card) => (\n          <Card key={card.label} className=\"relative overflow-hidden shadow-xs\">\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <CardTitle className=\"text-muted-foreground text-sm font-medium\">{card.label}</CardTitle>\n              <Badge wrap variant=\"secondary\" className=\"text-xs font-normal\">\n                {card.badge}\n              </Badge>\n            </CardHeader>\n            <CardContent className=\"space-y-1\">\n              <div className=\"text-foreground text-3xl font-bold tracking-tight tabular-nums\">{card.value}</div>\n              <p className=\"text-muted-foreground text-xs leading-relaxed\">{card.description}</p>\n            </CardContent>\n          </Card>\n        ))}\n      </div>\n\n      {/* Direct Deposit Funding Timeline Bar */}\n      <Card className=\"border-border shadow-xs\">\n        <CardHeader className=\"border-b pb-3\">\n          <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n            <div className=\"flex items-center gap-2\">\n              <Clock className=\"text-muted-foreground size-4\" aria-hidden=\"true\" />\n              <CardTitle className=\"text-sm font-semibold tracking-tight\">Direct Deposit Funding Timeline</CardTitle>\n            </div>\n            <Badge wrap variant=\"outline\" className=\"text-muted-foreground w-fit text-xs font-normal\">\n              ACH 2-Day Settlement Window\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardContent className=\"pt-4\">\n          <div className=\"grid grid-cols-1 gap-4 md:grid-cols-3\">\n            {timelineSteps.map((item, idx) => {\n              const Icon = item.icon\n              return (\n                <div\n                  key={item.step}\n                  className=\"bg-card relative flex flex-col justify-between rounded-lg border p-4 shadow-xs\"\n                >\n                  <div className=\"space-y-2\">\n                    <div className=\"flex flex-wrap items-center justify-between gap-2\">\n                      <div className=\"flex min-w-0 items-center gap-2\">\n                        <div className=\"bg-muted text-foreground flex size-7 items-center justify-center rounded-full text-xs font-semibold\">\n                          {item.step}\n                        </div>\n                        <span className=\"text-foreground text-xs font-semibold tracking-tight\">{item.title}</span>\n                      </div>\n                      <Badge className={cn('text-xs font-medium capitalize', item.statusClass)}>{item.status}</Badge>\n                    </div>\n\n                    <div className=\"pt-1\">\n                      <p className=\"text-foreground text-xs font-medium\">{item.date}</p>\n                      <p className=\"text-muted-foreground text-xs\">{item.time}</p>\n                    </div>\n\n                    <p className=\"text-muted-foreground text-xs leading-relaxed\">{item.description}</p>\n                  </div>\n\n                  <div className=\"text-muted-foreground mt-3 flex items-center justify-between border-t pt-2 text-xs\">\n                    <span className=\"inline-flex items-center gap-1 font-medium\">\n                      <Icon className=\"text-foreground/70 size-3.5\" aria-hidden=\"true\" />\n                      {idx === 0 ? 'Verified' : idx === 1 ? 'Processing' : 'Scheduled'}\n                    </span>\n                    {idx < timelineSteps.length - 1 && (\n                      <span className=\"text-muted-foreground/50 hidden md:inline-flex\">Next: Step {idx + 2}</span>\n                    )}\n                  </div>\n                </div>\n              )\n            })}\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* Employee Payroll Table */}\n      <div className=\"bg-card overflow-hidden rounded-lg border shadow-xs\">\n        <div className=\"flex flex-col gap-2 border-b p-4 sm:flex-row sm:items-center sm:justify-between\">\n          <div>\n            <h3 className=\"text-foreground text-base font-semibold tracking-tight\">Employee Compensation Breakdown</h3>\n            <p className=\"text-muted-foreground mt-0.5 text-xs\">\n              5 of 42 employees shown in active batch · 80.0 standard cycle base hours\n            </p>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <Badge wrap variant=\"secondary\" className=\"text-xs font-medium\">\n              42 Total Employees\n            </Badge>\n            <Badge wrap variant=\"outline\" className=\"border-success/20 text-success text-xs font-medium\">\n              Approved & Ready to Submit\n            </Badge>\n          </div>\n        </div>\n\n        <div className=\"overflow-x-auto\">\n          <Table>\n            <TableHeader>\n              <TableRow className=\"bg-muted/40 hover:bg-muted/40\">\n                <TableHead className=\"min-w-[220px]\">Employee</TableHead>\n                <TableHead>Pay Type</TableHead>\n                <TableHead className=\"text-right\">Hours</TableHead>\n                <TableHead className=\"text-right\">Gross Pay</TableHead>\n                <TableHead className=\"min-w-[180px] text-right\">Total Deductions</TableHead>\n                <TableHead className=\"text-right\">Net Pay</TableHead>\n                <TableHead className=\"min-w-[220px]\">Payment Method</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              {employees.map((emp) => (\n                <TableRow key={emp.id} className=\"hover:bg-muted/30\">\n                  <TableCell>\n                    <div className=\"flex items-center gap-3\">\n                      <Avatar className=\"size-8 border\">\n                        <AvatarFallback className=\"text-xs font-medium\">{initials(emp.name)}</AvatarFallback>\n                      </Avatar>\n                      <div className=\"flex min-w-0 flex-col\">\n                        <div className=\"flex items-center gap-2\">\n                          <span className=\"text-foreground truncate text-sm font-semibold\">{emp.name}</span>\n                          <Badge wrap variant=\"outline\" className=\"px-1.5 py-0 text-xs font-normal\">\n                            {emp.department}\n                          </Badge>\n                        </div>\n                        <span className=\"text-muted-foreground truncate text-xs\">{emp.role}</span>\n                      </div>\n                    </div>\n                  </TableCell>\n                  <TableCell>\n                    <Badge\n                      wrap\n                      variant={emp.payType === 'Salary' ? 'outline' : 'secondary'}\n                      className=\"text-xs font-medium\"\n                    >\n                      {emp.payType}\n                    </Badge>\n                  </TableCell>\n                  <TableCell className=\"text-foreground text-right font-mono text-xs tabular-nums\">\n                    {emp.hours}\n                  </TableCell>\n                  <TableCell className=\"text-foreground text-right font-medium tabular-nums\">{emp.grossPay}</TableCell>\n                  <TableCell className=\"text-right\">\n                    <div className=\"flex flex-col items-end\">\n                      <span className=\"text-destructive text-destructive text-sm font-medium tabular-nums\">\n                        {emp.deductions}\n                      </span>\n                      <span className=\"text-muted-foreground text-xs\">{emp.deductionsDetail}</span>\n                    </div>\n                  </TableCell>\n                  <TableCell className=\"text-right\">\n                    <span className=\"text-success text-success text-sm font-bold tabular-nums\">{emp.netPay}</span>\n                  </TableCell>\n                  <TableCell>\n                    <div className=\"flex items-center gap-2\">\n                      <Landmark className=\"text-muted-foreground size-4 shrink-0\" aria-hidden=\"true\" />\n                      <div className=\"flex min-w-0 flex-col\">\n                        <span className=\"text-foreground truncate text-xs font-medium\">{emp.paymentMethod}</span>\n                        <span className=\"text-muted-foreground truncate text-xs\">{emp.bankDetail}</span>\n                      </div>\n                    </div>\n                  </TableCell>\n                </TableRow>\n              ))}\n            </TableBody>\n          </Table>\n        </div>\n\n        <div className=\"bg-muted/20 flex flex-col items-center justify-between gap-3 border-t p-4 sm:flex-row\">\n          <p className=\"text-muted-foreground text-xs\">\n            Showing 5 of 42 employees · Reconciliation verified against IRS Form 941 schedules\n          </p>\n          <div className=\"flex items-center gap-2\">\n            <Button variant=\"outline\" size=\"sm\" disabled>\n              Previous\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Next\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/PayrollRunSummary.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "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"
  ],
  "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"
  ]
}