{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "payouts-management-table",
  "title": "Payouts Management Table",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/payouts-management-table/PayoutsManagementTable.tsx",
      "content": "'use client'\n\nimport {\n  Building2,\n  CalendarClock,\n  CheckCircle2,\n  Clock,\n  Download,\n  ExternalLink,\n  FileText,\n  Landmark,\n  MoreHorizontal,\n  ShieldCheck,\n  Wallet,\n  Zap,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport type PayoutStatus = 'paid' | 'in_transit' | 'pending' | 'failed'\n\nexport interface PayoutBatch {\n  id: string\n  initiatedDate: string\n  arrivalDate: string\n  destination: string\n  grossAmount: string\n  feeAmount: string\n  netAmount: string\n  status: PayoutStatus\n}\n\nconst statusConfig: Record<PayoutStatus, { label: string; className: string }> = {\n  paid: {\n    label: 'Paid',\n    className: 'bg-success/10 text-success border-success/20',\n  },\n  in_transit: {\n    label: 'In Transit',\n    className: 'bg-info/10 text-info border-info/20',\n  },\n  pending: {\n    label: 'Pending',\n    className: 'bg-warning/10 text-warning border-warning/20',\n  },\n  failed: {\n    label: 'Failed',\n    className: 'bg-destructive/10 text-destructive border-destructive/20',\n  },\n}\n\nconst summary = [\n  {\n    title: 'Available for Payout',\n    amount: '$18,420.50',\n    description: 'Auto-transfers daily at 00:00 UTC',\n    icon: Wallet,\n    iconClass: 'bg-success/10 text-success',\n  },\n  {\n    title: 'In Transit / Scheduled',\n    amount: '$4,250.00',\n    description: 'Estimated arrival: Aug 23, 2026',\n    icon: Clock,\n    iconClass: 'bg-info/10 text-info',\n  },\n  {\n    title: 'Rolling Reserve / Held',\n    amount: '$1,500.00',\n    description: 'Released in 14 days',\n    icon: ShieldCheck,\n    iconClass: 'bg-warning/10 text-warning',\n  },\n]\n\nconst payouts: PayoutBatch[] = [\n  {\n    id: 'PO-84920',\n    initiatedDate: 'Aug 21, 2026',\n    arrivalDate: 'Est. Aug 23, 2026',\n    destination: 'Chase •••• 4892',\n    grossAmount: '$12,780.00',\n    feeAmount: '-$330.00',\n    netAmount: '$12,450.00',\n    status: 'in_transit',\n  },\n  {\n    id: 'PO-84919',\n    initiatedDate: 'Aug 20, 2026',\n    arrivalDate: 'Est. Aug 22, 2026',\n    destination: 'Chase •••• 4892',\n    grossAmount: '$8,950.00',\n    feeAmount: '-$245.50',\n    netAmount: '$8,704.50',\n    status: 'pending',\n  },\n  {\n    id: 'PO-84918',\n    initiatedDate: 'Aug 19, 2026',\n    arrivalDate: 'Aug 21, 2026',\n    destination: 'Chase •••• 4892',\n    grossAmount: '$15,400.00',\n    feeAmount: '-$398.00',\n    netAmount: '$15,002.00',\n    status: 'paid',\n  },\n  {\n    id: 'PO-84917',\n    initiatedDate: 'Aug 18, 2026',\n    arrivalDate: 'Aug 20, 2026',\n    destination: 'Chase •••• 4892',\n    grossAmount: '$9,220.00',\n    feeAmount: '-$238.40',\n    netAmount: '$8,981.60',\n    status: 'paid',\n  },\n  {\n    id: 'PO-84916',\n    initiatedDate: 'Aug 17, 2026',\n    arrivalDate: 'Aug 19, 2026',\n    destination: 'Chase •••• 4892',\n    grossAmount: '$6,100.00',\n    feeAmount: '-$162.00',\n    netAmount: '$5,938.00',\n    status: 'failed',\n  },\n  {\n    id: 'PO-84915',\n    initiatedDate: 'Aug 16, 2026',\n    arrivalDate: 'Aug 18, 2026',\n    destination: 'Chase •••• 4892',\n    grossAmount: '$18,340.00',\n    feeAmount: '-$460.00',\n    netAmount: '$17,880.00',\n    status: 'paid',\n  },\n]\n\nexport function PayoutsManagementTable({ className }: { className?: string }) {\n  return (\n    <div data-slot=\"payouts-management-table\" className={cn('w-full space-y-6', className)}>\n      {/* Header */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n        <div>\n          <h2 className=\"text-2xl font-bold tracking-tight\">Payouts &amp; Transfers</h2>\n          <p className=\"text-muted-foreground mt-1 text-sm\">\n            Track automated scheduled settlements, rolling reserves, and bank transfers.\n          </p>\n        </div>\n        <div className=\"flex flex-wrap items-center gap-2.5\">\n          <Button variant=\"outline\">\n            <CalendarClock aria-hidden=\"true\" />\n            Configure Payout Schedule\n          </Button>\n          <Button>\n            <Zap aria-hidden=\"true\" />\n            Instant Payout\n          </Button>\n        </div>\n      </div>\n\n      {/* Summary KPI Cards */}\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-3\">\n        {summary.map((item) => {\n          const Icon = item.icon\n          return (\n            <Card key={item.title} className=\"shadow-xs\">\n              <CardContent className=\"space-y-2 p-5\">\n                <div className=\"flex items-center justify-between\">\n                  <p className=\"text-muted-foreground text-sm font-medium\">{item.title}</p>\n                  <div className={cn('flex size-8 items-center justify-center rounded-md', item.iconClass)}>\n                    <Icon aria-hidden=\"true\" className=\"size-4\" />\n                  </div>\n                </div>\n                <div>\n                  <p className=\"text-2xl font-bold tracking-tight tabular-nums\">{item.amount}</p>\n                  <p className=\"text-muted-foreground mt-1 text-xs\">{item.description}</p>\n                </div>\n              </CardContent>\n            </Card>\n          )\n        })}\n      </div>\n\n      {/* Primary Destination Card */}\n      <Card className=\"shadow-xs\">\n        <CardContent className=\"flex flex-col gap-4 p-5 sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"flex items-start gap-3.5\">\n            <div className=\"bg-primary/10 text-primary flex size-10 shrink-0 items-center justify-center rounded-lg\">\n              <Landmark aria-hidden=\"true\" className=\"size-5\" />\n            </div>\n            <div className=\"space-y-1\">\n              <div className=\"flex flex-wrap items-center gap-2\">\n                <span className=\"text-sm font-semibold\">Chase Commercial •••• 4892</span>\n                <Badge variant=\"outline\" className=\"border-success/20 bg-success/10 text-success text-xs font-medium\">\n                  <CheckCircle2 aria-hidden=\"true\" className=\"size-3\" />\n                  Verified\n                </Badge>\n                <Badge variant=\"secondary\" className=\"text-xs\">\n                  Primary Settlement\n                </Badge>\n              </div>\n              <p className=\"text-muted-foreground text-xs\">\n                Routing <span className=\"font-mono tabular-nums\">021000021</span> · Checking account · Daily automated\n                transfer\n              </p>\n            </div>\n          </div>\n          <Button variant=\"outline\" size=\"sm\" className=\"self-start sm:self-auto\">\n            <Building2 aria-hidden=\"true\" />\n            Update Bank Account\n          </Button>\n        </CardContent>\n      </Card>\n\n      {/* Payouts Batch Table */}\n      <div className=\"bg-card overflow-x-auto rounded-lg border shadow-xs\">\n        <Table>\n          <TableHeader>\n            <TableRow>\n              <TableHead>Payout ID</TableHead>\n              <TableHead>Initiated / Expected</TableHead>\n              <TableHead>Destination</TableHead>\n              <TableHead className=\"text-right\">Gross</TableHead>\n              <TableHead className=\"text-right\">Fees</TableHead>\n              <TableHead className=\"text-right\">Net Amount</TableHead>\n              <TableHead>Status</TableHead>\n              <TableHead className=\"w-12\">\n                <span className=\"sr-only\">Actions</span>\n              </TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {payouts.map((payout) => (\n              <TableRow key={payout.id} className=\"hover:bg-muted/50\">\n                <TableCell className=\"font-mono text-xs font-semibold\">{payout.id}</TableCell>\n                <TableCell>\n                  <div className=\"text-sm font-medium\">{payout.initiatedDate}</div>\n                  <div className=\"text-muted-foreground text-xs\">{payout.arrivalDate}</div>\n                </TableCell>\n                <TableCell>\n                  <div className=\"flex items-center gap-1.5 text-sm font-medium\">\n                    <Landmark aria-hidden=\"true\" className=\"text-muted-foreground size-3.5 shrink-0\" />\n                    <span>{payout.destination}</span>\n                  </div>\n                </TableCell>\n                <TableCell className=\"text-muted-foreground text-right text-sm tabular-nums\">\n                  {payout.grossAmount}\n                </TableCell>\n                <TableCell className=\"text-muted-foreground text-right text-xs tabular-nums\">\n                  {payout.feeAmount}\n                </TableCell>\n                <TableCell className=\"text-right text-sm font-semibold tabular-nums\">{payout.netAmount}</TableCell>\n                <TableCell>\n                  <Badge variant=\"outline\" className={cn('font-medium', statusConfig[payout.status].className)}>\n                    {statusConfig[payout.status].label}\n                  </Badge>\n                </TableCell>\n                <TableCell>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon-sm\" className=\"text-muted-foreground\">\n                        <MoreHorizontal aria-hidden=\"true\" />\n                        <span className=\"sr-only\">Open actions for {payout.id}</span>\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent align=\"end\" className=\"w-52\">\n                      <DropdownMenuItem>\n                        <FileText aria-hidden=\"true\" />\n                        View itemized breakdown\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <Download aria-hidden=\"true\" />\n                        Download receipt\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <ExternalLink aria-hidden=\"true\" />\n                        Trace transfer\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Table Footer / Pagination */}\n      <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p className=\"text-muted-foreground text-sm\">\n          Showing <span className=\"text-foreground font-medium\">6</span> of{' '}\n          <span className=\"text-foreground font-medium\">128</span> payout batches\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  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/PayoutsManagementTable.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "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/dropdown-menu.json",
    "https://uipkge.dev/r/react/table.json"
  ],
  "description": "Merchant payout management page: automated payout schedule controls, instant payout trigger, summary balance cards for available, in-transit, and rolling reserve balances, verified settlement bank account destination card, and an itemized batch transfer history table with gross/fee/net amounts, status badges, and action menus.",
  "categories": [
    "finance",
    "app",
    "billing"
  ]
}