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