{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "payouts-management-table",
  "title": "Payouts Management Table",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/payouts-management-table/PayoutsManagementTable.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\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-vue-next'\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 props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst statusConfig: Record<PayoutStatus, { label: string; class: string }> = {\n  paid: {\n    label: 'Paid',\n    class: 'bg-success/10 text-success border-success/20',\n  },\n  in_transit: {\n    label: 'In Transit',\n    class: 'bg-info/10 text-info border-info/20',\n  },\n  pending: {\n    label: 'Pending',\n    class: 'bg-warning/10 text-warning border-warning/20',\n  },\n  failed: {\n    label: 'Failed',\n    class: '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</script>\n\n<template>\n  <div data-slot=\"payouts-management-table\" :class=\"cn('w-full space-y-6', props.class)\">\n    <div class=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n      <div>\n        <h2 class=\"text-2xl font-bold tracking-tight\">Payouts &amp; Transfers</h2>\n        <p class=\"text-muted-foreground mt-1 text-sm\">\n          Track automated scheduled settlements, rolling reserves, and bank transfers.\n        </p>\n      </div>\n      <div class=\"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    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-3\">\n      <Card v-for=\"item in summary\" :key=\"item.title\" class=\"shadow-xs\">\n        <CardContent class=\"space-y-2 p-5\">\n          <div class=\"flex items-center justify-between\">\n            <p class=\"text-muted-foreground text-sm font-medium\">{{ item.title }}</p>\n            <div :class=\"cn('flex size-8 items-center justify-center rounded-md', item.iconClass)\">\n              <component :is=\"item.icon\" aria-hidden=\"true\" class=\"size-4\" />\n            </div>\n          </div>\n          <div>\n            <p class=\"text-2xl font-bold tracking-tight tabular-nums\">{{ item.amount }}</p>\n            <p class=\"text-muted-foreground mt-1 text-xs\">{{ item.description }}</p>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n\n    <Card class=\"shadow-xs\">\n      <CardContent class=\"flex flex-col gap-4 p-5 sm:flex-row sm:items-center sm:justify-between\">\n        <div class=\"flex items-start gap-3.5\">\n          <div class=\"bg-primary/10 text-primary flex size-10 shrink-0 items-center justify-center rounded-lg\">\n            <Landmark aria-hidden=\"true\" class=\"size-5\" />\n          </div>\n          <div class=\"space-y-1\">\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <span class=\"text-sm font-semibold\">Chase Commercial •••• 4892</span>\n              <Badge variant=\"outline\" class=\"border-success/20 bg-success/10 text-success text-xs font-medium\">\n                <CheckCircle2 aria-hidden=\"true\" class=\"size-3\" />\n                Verified\n              </Badge>\n              <Badge variant=\"secondary\" class=\"text-xs\">Primary Settlement</Badge>\n            </div>\n            <p class=\"text-muted-foreground text-xs\">\n              Routing <span class=\"font-mono tabular-nums\">021000021</span> · Checking account · Daily automated\n              transfer\n            </p>\n          </div>\n        </div>\n        <Button variant=\"outline\" size=\"sm\" class=\"self-start sm:self-auto\">\n          <Building2 aria-hidden=\"true\" />\n          Update Bank Account\n        </Button>\n      </CardContent>\n    </Card>\n\n    <div class=\"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 class=\"text-right\">Gross</TableHead>\n            <TableHead class=\"text-right\">Fees</TableHead>\n            <TableHead class=\"text-right\">Net Amount</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead class=\"w-12\">\n              <span class=\"sr-only\">Actions</span>\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow v-for=\"payout in payouts\" :key=\"payout.id\" class=\"hover:bg-muted/50\">\n            <TableCell class=\"font-mono text-xs font-semibold\">{{ payout.id }}</TableCell>\n            <TableCell>\n              <div class=\"text-sm font-medium\">{{ payout.initiatedDate }}</div>\n              <div class=\"text-muted-foreground text-xs\">{{ payout.arrivalDate }}</div>\n            </TableCell>\n            <TableCell>\n              <div class=\"flex items-center gap-1.5 text-sm font-medium\">\n                <Landmark aria-hidden=\"true\" class=\"text-muted-foreground size-3.5 shrink-0\" />\n                <span>{{ payout.destination }}</span>\n              </div>\n            </TableCell>\n            <TableCell class=\"text-muted-foreground text-right text-sm tabular-nums\">{{\n              payout.grossAmount\n            }}</TableCell>\n            <TableCell class=\"text-muted-foreground text-right text-xs tabular-nums\">{{ payout.feeAmount }}</TableCell>\n            <TableCell class=\"text-right text-sm font-semibold tabular-nums\">{{ payout.netAmount }}</TableCell>\n            <TableCell>\n              <Badge variant=\"outline\" :class=\"cn('font-medium', statusConfig[payout.status].class)\">\n                {{ statusConfig[payout.status].label }}\n              </Badge>\n            </TableCell>\n            <TableCell>\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <Button variant=\"ghost\" size=\"icon-sm\" class=\"text-muted-foreground\">\n                    <MoreHorizontal aria-hidden=\"true\" />\n                    <span class=\"sr-only\">Open actions for {{ payout.id }}</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" class=\"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        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n      <p class=\"text-muted-foreground text-sm\">\n        Showing <span class=\"text-foreground font-medium\">6</span> of\n        <span class=\"text-foreground font-medium\">128</span> payout batches\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</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/PayoutsManagementTable.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "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/dropdown-menu.json",
    "https://uipkge.dev/r/vue/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"
  ]
}