{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tenant-rent-ledger",
  "title": "Tenant Rent Ledger",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/tenant-rent-ledger/TenantRentLedger.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { useState } from 'react'\nimport {\n  Building2,\n  Calendar,\n  CheckCircle2,\n  Clock,\n  CreditCard,\n  Download,\n  Home,\n  Landmark,\n  ShieldCheck,\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, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport { Switch } from '@/components/ui/switch'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport interface PaymentRecord {\n  id: string\n  period: string\n  description: string\n  dueDate: string\n  paidDate: string\n  method: string\n  methodType: 'ach' | 'card' | 'wire'\n  amount: string\n  status: 'paid' | 'waived'\n  statusLabel: string\n}\n\nconst financialCards = [\n  {\n    title: 'Monthly Base Rent',\n    value: '$3,450.00',\n    unit: '/ mo',\n    description: 'Fixed lease rate through Jul 2027',\n    icon: Home,\n    iconColor: 'bg-primary/10 text-primary',\n  },\n  {\n    title: 'Next Due Date',\n    value: 'Sep 01, 2026',\n    unit: '',\n    description: 'Due in 11 days · Grace period to Sep 5',\n    highlightBadge: 'Due in 11 days',\n    icon: Calendar,\n    iconColor: 'bg-info/10 text-info',\n  },\n  {\n    title: 'Autopay Status',\n    value: 'Active',\n    unit: '',\n    description: 'Scheduled for 1st of month with Visa •••• 4892',\n    icon: Zap,\n    iconColor: 'bg-success/10 text-success',\n  },\n  {\n    title: 'Security Deposit on File',\n    value: '$3,450.00',\n    unit: '',\n    description: 'Held in Escrow (Interest Bearing)',\n    icon: ShieldCheck,\n    iconColor: 'bg-warning/10 text-warning',\n  },\n]\n\nconst paymentRecords: PaymentRecord[] = [\n  {\n    id: 'pay-2026-08',\n    period: 'August 2026 Rent',\n    description: 'Base Rent ($3,400.00) + High-Speed Fiber ($50.00)',\n    dueDate: 'Aug 01, 2026',\n    paidDate: 'Aug 01, 2026',\n    method: 'ACH Transfer · Chase •••• 4892',\n    methodType: 'ach',\n    amount: '$3,450.00',\n    status: 'paid',\n    statusLabel: 'Paid on Time',\n  },\n  {\n    id: 'pay-2026-07',\n    period: 'July 2026 Rent',\n    description: 'Base Rent ($3,400.00) + Assigned Parking Spot #4B ($50.00)',\n    dueDate: 'Jul 01, 2026',\n    paidDate: 'Jul 01, 2026',\n    method: 'ACH Transfer · Chase •••• 4892',\n    methodType: 'ach',\n    amount: '$3,450.00',\n    status: 'paid',\n    statusLabel: 'Paid on Time',\n  },\n  {\n    id: 'pay-2026-06',\n    period: 'June 2026 Rent',\n    description: 'Base Rent ($3,400.00) + Water & Sewer Allocation ($50.00)',\n    dueDate: 'Jun 01, 2026',\n    paidDate: 'Jun 03, 2026',\n    method: 'Visa •••• 4892',\n    methodType: 'card',\n    amount: '$3,450.00',\n    status: 'waived',\n    statusLabel: 'Late Fee Waived',\n  },\n  {\n    id: 'pay-2026-05',\n    period: 'May 2026 Rent',\n    description: 'Base Rent ($3,400.00) + Storage Locker #12 ($50.00)',\n    dueDate: 'May 01, 2026',\n    paidDate: 'May 01, 2026',\n    method: 'ACH Transfer · Chase •••• 4892',\n    methodType: 'ach',\n    amount: '$3,450.00',\n    status: 'paid',\n    statusLabel: 'Paid on Time',\n  },\n  {\n    id: 'pay-2026-04',\n    period: 'April 2026 Rent',\n    description: 'First Full Month Base Rent ($3,400.00) + Pet Rent ($50.00)',\n    dueDate: 'Apr 01, 2026',\n    paidDate: 'Apr 01, 2026',\n    method: 'ACH Transfer · Chase •••• 4892',\n    methodType: 'ach',\n    amount: '$3,450.00',\n    status: 'paid',\n    statusLabel: 'Paid on Time',\n  },\n  {\n    id: 'pay-2026-03-dep',\n    period: 'Security Deposit & Move-In Fee',\n    description: '100% Refundable Security Escrow Deposit + Key Fob Activation',\n    dueDate: 'Mar 15, 2026',\n    paidDate: 'Mar 15, 2026',\n    method: 'Wire Transfer · Wells Fargo •••• 1044',\n    methodType: 'wire',\n    amount: '$3,450.00',\n    status: 'paid',\n    statusLabel: 'Paid on Time',\n  },\n]\n\nexport function TenantRentLedger({ className }: { className?: string }) {\n  const [autopayEnabled, setAutopayEnabled] = useState(true)\n  const [autopayDay, setAutopayDay] = useState<'1st' | '5th'>('1st')\n\n  return (\n    <div data-slot=\"tenant-rent-ledger\" className={cn('w-full space-y-6', className)}>\n      {/* Resident & Unit Header */}\n      <div className=\"bg-card flex flex-col gap-4 rounded-xl border p-5 shadow-xs 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-2.5\">\n            <h2 className=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">Elena Rostova</h2>\n            <Badge wrap variant=\"secondary\" className=\"text-xs font-semibold\">\n              Unit 4B\n            </Badge>\n            <Badge wrap variant=\"outline\" className=\"border-success/20 bg-success/10 text-success text-xs font-medium\">\n              <CheckCircle2 className=\"text-success size-3\" aria-hidden=\"true\" />\n              $0.00 Paid in Full\n            </Badge>\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-1.5 text-xs sm:text-sm\">\n            <Building2 className=\"text-muted-foreground size-4 shrink-0\" aria-hidden=\"true\" />\n            <span>Pacific Heights Luxury Residences, San Francisco</span>\n          </div>\n        </div>\n        <div className=\"flex items-center gap-3 self-start sm:self-auto\">\n          <Button className=\"font-medium shadow-xs\">\n            <CreditCard className=\"size-4\" aria-hidden=\"true\" />\n            Pay Rent Now\n          </Button>\n        </div>\n      </div>\n\n      {/* 4 Financial Overview Cards */}\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        {financialCards.map((card) => {\n          const Icon = card.icon\n          return (\n            <Card key={card.title} className=\"shadow-xs\">\n              <CardContent className=\"space-y-2 p-5\">\n                <div className=\"flex items-center justify-between gap-2\">\n                  <p className=\"text-muted-foreground text-xs font-medium\">{card.title}</p>\n                  <div className={cn('flex size-8 shrink-0 items-center justify-center rounded-lg', card.iconColor)}>\n                    <Icon className=\"size-4\" aria-hidden=\"true\" />\n                  </div>\n                </div>\n                <div>\n                  <div className=\"flex items-baseline gap-1\">\n                    <p className=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">{card.value}</p>\n                    {card.unit && <span className=\"text-muted-foreground text-xs font-normal\">{card.unit}</span>}\n                  </div>\n                  <p className=\"text-muted-foreground mt-1 text-xs\">{card.description}</p>\n                </div>\n              </CardContent>\n            </Card>\n          )\n        })}\n      </div>\n\n      {/* Autopay & Payment Method Card */}\n      <Card className=\"shadow-xs\">\n        <CardHeader>\n          <div className=\"flex items-center justify-between\">\n            <div>\n              <CardTitle className=\"text-base font-semibold\">Autopay &amp; Payment Preferences</CardTitle>\n              <CardDescription className=\"text-xs\">\n                Configure automatic monthly rent deduction and manage saved funding methods.\n              </CardDescription>\n            </div>\n            {autopayEnabled ? (\n              <Badge\n                wrap\n                variant=\"outline\"\n                className=\"border-success/20 bg-success/10 text-success text-xs font-medium\"\n              >\n                Autopay Active\n              </Badge>\n            ) : (\n              <Badge wrap variant=\"secondary\" className=\"text-xs font-medium\">\n                Autopay Paused\n              </Badge>\n            )}\n          </div>\n        </CardHeader>\n        <CardContent className=\"space-y-5\">\n          {/* Toggle Autopay Switch */}\n          <div className=\"bg-muted/30 flex flex-col gap-3 rounded-lg border p-4 sm:flex-row sm:items-center sm:justify-between\">\n            <div className=\"space-y-0.5\">\n              <label htmlFor=\"autopay-toggle-react\" className=\"text-foreground cursor-pointer text-sm font-medium\">\n                Enable Automatic Rent Deductions\n              </label>\n              <p className=\"text-muted-foreground text-xs\">\n                Automatically charge your primary payment method on your selected schedule before due date.\n              </p>\n            </div>\n            <Switch id=\"autopay-toggle-react\" checked={autopayEnabled} onCheckedChange={setAutopayEnabled} />\n          </div>\n\n          <Separator />\n\n          {/* Primary Bank Account / Card */}\n          <div className=\"space-y-3\">\n            <div className=\"flex items-center justify-between\">\n              <h4 className=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n                Primary Payment Method\n              </h4>\n              <Button variant=\"ghost\" size=\"xs\" className=\"text-primary hover:text-primary text-xs font-medium\">\n                Change Method\n              </Button>\n            </div>\n            <div className=\"flex flex-col gap-3 rounded-lg border p-4 sm:flex-row sm:items-center sm:justify-between\">\n              <div className=\"flex items-center gap-3.5\">\n                <div className=\"bg-background flex size-10 shrink-0 items-center justify-center rounded-lg border shadow-xs\">\n                  <CreditCard className=\"text-foreground size-5\" aria-hidden=\"true\" />\n                </div>\n                <div className=\"space-y-0.5\">\n                  <div className=\"flex items-center gap-2\">\n                    <span className=\"text-foreground text-sm font-semibold tabular-nums\">Visa •••• 4892</span>\n                    <Badge wrap variant=\"secondary\" className=\"text-xs font-normal\">\n                      Default\n                    </Badge>\n                  </div>\n                  <p className=\"text-muted-foreground text-xs\">Elena Rostova · Expires 08/28 · Bank of America</p>\n                </div>\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <Badge wrap variant=\"outline\" className=\"border-success/20 bg-success/10 text-success text-xs\">\n                  <CheckCircle2 className=\"text-success size-3\" aria-hidden=\"true\" />\n                  Verified for ACH &amp; Debit\n                </Badge>\n              </div>\n            </div>\n          </div>\n\n          <Separator />\n\n          {/* Autopay Date Selector (1st vs 5th) */}\n          <div className=\"space-y-3\">\n            <div className=\"space-y-0.5\">\n              <h4 className=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n                Scheduled Deduction Date\n              </h4>\n              <p className=\"text-muted-foreground text-xs\">\n                Select when rent will be debited from your account each cycle.\n              </p>\n            </div>\n            <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n              <button\n                type=\"button\"\n                disabled={!autopayEnabled}\n                className={cn(\n                  'focus-visible:ring-ring flex cursor-pointer items-start gap-3 rounded-lg border p-3.5 text-left transition-colors duration-150 focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',\n                  autopayDay === '1st' && autopayEnabled\n                    ? 'border-primary bg-primary/5 ring-primary ring-1'\n                    : 'border-border hover:bg-muted/50',\n                )}\n                onClick={() => setAutopayDay('1st')}\n              >\n                <div\n                  className={cn(\n                    'mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border transition-colors',\n                    autopayDay === '1st' && autopayEnabled\n                      ? 'border-primary bg-primary text-primary-foreground'\n                      : 'border-muted-foreground/50',\n                  )}\n                >\n                  {autopayDay === '1st' && autopayEnabled && <span className=\"bg-background size-1.5 rounded-full\" />}\n                </div>\n                <div className=\"space-y-1\">\n                  <div className=\"flex items-center gap-2\">\n                    <span className=\"text-foreground text-sm font-medium\">1st of the month</span>\n                    <Badge\n                      wrap\n                      variant=\"outline\"\n                      className=\"border-success/20 bg-success/10 text-success text-xs font-medium\"\n                    >\n                      Recommended\n                    </Badge>\n                  </div>\n                  <p className=\"text-muted-foreground text-xs\">\n                    Debited promptly on the rent due date. Ensures zero delinquency risk.\n                  </p>\n                </div>\n              </button>\n\n              <button\n                type=\"button\"\n                disabled={!autopayEnabled}\n                className={cn(\n                  'focus-visible:ring-ring flex cursor-pointer items-start gap-3 rounded-lg border p-3.5 text-left transition-colors duration-150 focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',\n                  autopayDay === '5th' && autopayEnabled\n                    ? 'border-primary bg-primary/5 ring-primary ring-1'\n                    : 'border-border hover:bg-muted/50',\n                )}\n                onClick={() => setAutopayDay('5th')}\n              >\n                <div\n                  className={cn(\n                    'mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border transition-colors',\n                    autopayDay === '5th' && autopayEnabled\n                      ? 'border-primary bg-primary text-primary-foreground'\n                      : 'border-muted-foreground/50',\n                  )}\n                >\n                  {autopayDay === '5th' && autopayEnabled && <span className=\"bg-background size-1.5 rounded-full\" />}\n                </div>\n                <div className=\"space-y-1\">\n                  <div className=\"flex items-center gap-2\">\n                    <span className=\"text-foreground text-sm font-medium\">5th of the month</span>\n                    <Badge wrap variant=\"secondary\" className=\"text-xs font-normal\">\n                      Grace Period\n                    </Badge>\n                  </div>\n                  <p className=\"text-muted-foreground text-xs\">\n                    Processes within the standard 5-day building grace window before late fees.\n                  </p>\n                </div>\n              </button>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* Payment History Ledger Table */}\n      <div className=\"space-y-3\">\n        <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n          <div>\n            <h3 className=\"text-foreground text-base font-semibold tracking-tight\">Payment History &amp; Ledger</h3>\n            <p className=\"text-muted-foreground text-xs\">\n              Complete transaction record of monthly rent charges, utility allocations, and security deposits.\n            </p>\n          </div>\n          <Button aria-label=\"Download attachment\" variant=\"outline\" size=\"sm\" className=\"self-start sm:self-auto\">\n            <Download className=\"size-4\" aria-hidden=\"true\" />\n            Download Statement (PDF)\n          </Button>\n        </div>\n\n        <div className=\"bg-card overflow-x-auto rounded-lg border shadow-xs\">\n          <Table>\n            <TableHeader>\n              <TableRow>\n                <TableHead>Billing Period &amp; Description</TableHead>\n                <TableHead>Due Date</TableHead>\n                <TableHead>Paid Date</TableHead>\n                <TableHead>Payment Method</TableHead>\n                <TableHead className=\"text-right\">Amount Paid</TableHead>\n                <TableHead>Status</TableHead>\n                <TableHead className=\"text-right\">\n                  <span className=\"sr-only\">Actions</span>\n                </TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              {paymentRecords.map((record) => (\n                <TableRow key={record.id} className=\"hover:bg-muted/50\">\n                  <TableCell>\n                    <div className=\"text-foreground text-sm font-medium\">{record.period}</div>\n                    <div className=\"text-muted-foreground text-xs\">{record.description}</div>\n                  </TableCell>\n                  <TableCell className=\"text-muted-foreground text-sm tabular-nums\">{record.dueDate}</TableCell>\n                  <TableCell className=\"text-foreground text-sm font-medium tabular-nums\">{record.paidDate}</TableCell>\n                  <TableCell>\n                    <div className=\"text-foreground flex items-center gap-1.5 text-xs sm:text-sm\">\n                      {record.methodType === 'ach' && (\n                        <Landmark className=\"text-muted-foreground size-3.5 shrink-0\" aria-hidden=\"true\" />\n                      )}\n                      {record.methodType === 'card' && (\n                        <CreditCard className=\"text-muted-foreground size-3.5 shrink-0\" aria-hidden=\"true\" />\n                      )}\n                      {record.methodType === 'wire' && (\n                        <ShieldCheck className=\"text-muted-foreground size-3.5 shrink-0\" aria-hidden=\"true\" />\n                      )}\n                      <span className=\"truncate\">{record.method}</span>\n                    </div>\n                  </TableCell>\n                  <TableCell className=\"text-foreground text-right text-sm font-bold tabular-nums\">\n                    {record.amount}\n                  </TableCell>\n                  <TableCell>\n                    {record.status === 'paid' ? (\n                      <Badge\n                        wrap\n                        variant=\"outline\"\n                        className=\"border-success/20 bg-success/10 text-success text-xs font-medium\"\n                      >\n                        <CheckCircle2 className=\"text-success size-3\" aria-hidden=\"true\" />\n                        {record.statusLabel}\n                      </Badge>\n                    ) : (\n                      <Badge wrap variant=\"outline\" className=\"border-info/20 bg-info/10 text-info text-xs font-medium\">\n                        <Clock className=\"text-info size-3\" aria-hidden=\"true\" />\n                        {record.statusLabel}\n                      </Badge>\n                    )}\n                  </TableCell>\n                  <TableCell className=\"text-right\">\n                    <Button\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      className=\"text-muted-foreground hover:text-foreground h-8 gap-1.5 text-xs\"\n                      aria-label=\"Download receipt PDF\"\n                    >\n                      <Download className=\"size-3.5\" aria-hidden=\"true\" />\n                      <span>Receipt</span>\n                    </Button>\n                  </TableCell>\n                </TableRow>\n              ))}\n            </TableBody>\n          </Table>\n        </div>\n\n        <div className=\"text-muted-foreground flex flex-col gap-3 pt-1 text-xs sm:flex-row sm:items-center sm:justify-between\">\n          <p>\n            Showing <span className=\"text-foreground font-medium\">6</span> of{' '}\n            <span className=\"text-foreground font-medium\">6</span> lease payments · Lease Ref:{' '}\n            <span className=\"font-mono\">PH-4B-2026</span>\n          </p>\n          <div className=\"flex items-center gap-2\">\n            <Button variant=\"outline\" size=\"xs\" disabled>\n              Previous\n            </Button>\n            <Button variant=\"outline\" size=\"xs\" disabled>\n              Next\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/TenantRentLedger.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/separator.json",
    "https://uipkge.dev/r/react/switch.json",
    "https://uipkge.dev/r/react/table.json"
  ],
  "description": "Property management resident portal with tenant header, 4 financial overview cards (monthly rent, next due date, autopay status, escrow deposit), autopay toggle with date schedule selection, and a complete 6-record payment ledger with receipt actions.",
  "categories": [
    "real-estate",
    "app",
    "billing",
    "dashboard"
  ]
}