{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "tenant-rent-ledger",
  "title": "Tenant Rent Ledger",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/tenant-rent-ledger/TenantRentLedger.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { ref } from 'vue'\nimport {\n  Building2,\n  Calendar,\n  CheckCircle2,\n  Clock,\n  CreditCard,\n  Download,\n  Home,\n  Landmark,\n  ShieldCheck,\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, 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\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst autopayEnabled = ref(true)\nconst autopayDay = ref<'1st' | '5th'>('1st')\n\ninterface 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</script>\n\n<template>\n  <div data-slot=\"tenant-rent-ledger\" :class=\"cn('w-full space-y-6', props.class)\">\n    <!-- Resident & Unit Header -->\n    <div\n      class=\"bg-card flex flex-col gap-4 rounded-xl border p-5 shadow-xs sm:flex-row sm:items-center sm:justify-between\"\n    >\n      <div class=\"space-y-1.5\">\n        <div class=\"flex flex-wrap items-center gap-2.5\">\n          <h2 class=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">Elena Rostova</h2>\n          <Badge wrap variant=\"secondary\" class=\"text-xs font-semibold\"> Unit 4B </Badge>\n          <Badge wrap variant=\"outline\" class=\"border-success/20 bg-success/10 text-success text-xs font-medium\">\n            <CheckCircle2 class=\"text-success size-3\" aria-hidden=\"true\" />\n            $0.00 Paid in Full\n          </Badge>\n        </div>\n        <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs sm:text-sm\">\n          <Building2 class=\"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 class=\"flex items-center gap-3 self-start sm:self-auto\">\n        <Button class=\"font-medium shadow-xs\">\n          <CreditCard class=\"size-4\" aria-hidden=\"true\" />\n          Pay Rent Now\n        </Button>\n      </div>\n    </div>\n\n    <!-- 4 Financial Overview Cards -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <Card v-for=\"card in financialCards\" :key=\"card.title\" class=\"shadow-xs\">\n        <CardContent class=\"space-y-2 p-5\">\n          <div class=\"flex items-center justify-between gap-2\">\n            <p class=\"text-muted-foreground text-xs font-medium\">{{ card.title }}</p>\n            <div :class=\"cn('flex size-8 shrink-0 items-center justify-center rounded-lg', card.iconColor)\">\n              <component :is=\"card.icon\" class=\"size-4\" aria-hidden=\"true\" />\n            </div>\n          </div>\n          <div>\n            <div class=\"flex items-baseline gap-1\">\n              <p class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">{{ card.value }}</p>\n              <span v-if=\"card.unit\" class=\"text-muted-foreground text-xs font-normal\">{{ card.unit }}</span>\n            </div>\n            <p class=\"text-muted-foreground mt-1 text-xs\">{{ card.description }}</p>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- Autopay & Payment Method Card -->\n    <Card class=\"shadow-xs\">\n      <CardHeader>\n        <div class=\"flex items-center justify-between\">\n          <div>\n            <CardTitle class=\"text-base font-semibold\">Autopay &amp; Payment Preferences</CardTitle>\n            <CardDescription class=\"text-xs\">\n              Configure automatic monthly rent deduction and manage saved funding methods.\n            </CardDescription>\n          </div>\n          <Badge\n            wrap\n            v-if=\"autopayEnabled\"\n            variant=\"outline\"\n            class=\"border-success/20 bg-success/10 text-success text-xs font-medium\"\n          >\n            Autopay Active\n          </Badge>\n          <Badge wrap v-else variant=\"secondary\" class=\"text-xs font-medium\"> Autopay Paused </Badge>\n        </div>\n      </CardHeader>\n      <CardContent class=\"space-y-5\">\n        <!-- Toggle Autopay Switch -->\n        <div\n          class=\"bg-muted/30 flex flex-col gap-3 rounded-lg border p-4 sm:flex-row sm:items-center sm:justify-between\"\n        >\n          <div class=\"space-y-0.5\">\n            <label for=\"autopay-toggle\" class=\"text-foreground cursor-pointer text-sm font-medium\">\n              Enable Automatic Rent Deductions\n            </label>\n            <p class=\"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\" :model-value=\"autopayEnabled\" @update:model-value=\"autopayEnabled = $event\" />\n        </div>\n\n        <Separator />\n\n        <!-- Primary Bank Account / Card -->\n        <div class=\"space-y-3\">\n          <div class=\"flex items-center justify-between\">\n            <h4 class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">Primary Payment Method</h4>\n            <Button variant=\"ghost\" size=\"xs\" class=\"text-primary hover:text-primary text-xs font-medium\">\n              Change Method\n            </Button>\n          </div>\n          <div class=\"flex flex-col gap-3 rounded-lg border p-4 sm:flex-row sm:items-center sm:justify-between\">\n            <div class=\"flex items-center gap-3.5\">\n              <div class=\"bg-background flex size-10 shrink-0 items-center justify-center rounded-lg border shadow-xs\">\n                <CreditCard class=\"text-foreground size-5\" aria-hidden=\"true\" />\n              </div>\n              <div class=\"space-y-0.5\">\n                <div class=\"flex items-center gap-2\">\n                  <span class=\"text-foreground text-sm font-semibold tabular-nums\">Visa •••• 4892</span>\n                  <Badge wrap variant=\"secondary\" class=\"text-xs font-normal\">Default</Badge>\n                </div>\n                <p class=\"text-muted-foreground text-xs\">Elena Rostova · Expires 08/28 · Bank of America</p>\n              </div>\n            </div>\n            <div class=\"flex items-center gap-2\">\n              <Badge wrap variant=\"outline\" class=\"border-success/20 bg-success/10 text-success text-xs\">\n                <CheckCircle2 class=\"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 class=\"space-y-3\">\n          <div class=\"space-y-0.5\">\n            <h4 class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n              Scheduled Deduction Date\n            </h4>\n            <p class=\"text-muted-foreground text-xs\">Select when rent will be debited from your account each cycle.</p>\n          </div>\n          <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n            <button\n              type=\"button\"\n              :disabled=\"!autopayEnabled\"\n              :class=\"\n                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              \"\n              @click=\"autopayDay = '1st'\"\n            >\n              <div\n                :class=\"\n                  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              >\n                <span v-if=\"autopayDay === '1st' && autopayEnabled\" class=\"bg-background size-1.5 rounded-full\" />\n              </div>\n              <div class=\"space-y-1\">\n                <div class=\"flex items-center gap-2\">\n                  <span class=\"text-foreground text-sm font-medium\">1st of the month</span>\n                  <Badge\n                    wrap\n                    variant=\"outline\"\n                    class=\"border-success/20 bg-success/10 text-success text-xs font-medium\"\n                  >\n                    Recommended\n                  </Badge>\n                </div>\n                <p class=\"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              :class=\"\n                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              \"\n              @click=\"autopayDay = '5th'\"\n            >\n              <div\n                :class=\"\n                  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              >\n                <span v-if=\"autopayDay === '5th' && autopayEnabled\" class=\"bg-background size-1.5 rounded-full\" />\n              </div>\n              <div class=\"space-y-1\">\n                <div class=\"flex items-center gap-2\">\n                  <span class=\"text-foreground text-sm font-medium\">5th of the month</span>\n                  <Badge wrap variant=\"secondary\" class=\"text-xs font-normal\"> Grace Period </Badge>\n                </div>\n                <p class=\"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 class=\"space-y-3\">\n      <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n        <div>\n          <h3 class=\"text-foreground text-base font-semibold tracking-tight\">Payment History &amp; Ledger</h3>\n          <p class=\"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\" class=\"self-start sm:self-auto\">\n          <Download class=\"size-4\" aria-hidden=\"true\" />\n          Download Statement (PDF)\n        </Button>\n      </div>\n\n      <div class=\"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 class=\"text-right\">Amount Paid</TableHead>\n              <TableHead>Status</TableHead>\n              <TableHead class=\"text-right\"><span class=\"sr-only\">Actions</span></TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            <TableRow v-for=\"record in paymentRecords\" :key=\"record.id\" class=\"hover:bg-muted/50\">\n              <TableCell>\n                <div class=\"text-foreground text-sm font-medium\">{{ record.period }}</div>\n                <div class=\"text-muted-foreground text-xs\">{{ record.description }}</div>\n              </TableCell>\n              <TableCell class=\"text-muted-foreground text-sm tabular-nums\">{{ record.dueDate }}</TableCell>\n              <TableCell class=\"text-foreground text-sm font-medium tabular-nums\">{{ record.paidDate }}</TableCell>\n              <TableCell>\n                <div class=\"text-foreground flex items-center gap-1.5 text-xs sm:text-sm\">\n                  <Landmark\n                    v-if=\"record.methodType === 'ach'\"\n                    class=\"text-muted-foreground size-3.5 shrink-0\"\n                    aria-hidden=\"true\"\n                  />\n                  <CreditCard\n                    v-else-if=\"record.methodType === 'card'\"\n                    class=\"text-muted-foreground size-3.5 shrink-0\"\n                    aria-hidden=\"true\"\n                  />\n                  <ShieldCheck v-else class=\"text-muted-foreground size-3.5 shrink-0\" aria-hidden=\"true\" />\n                  <span class=\"truncate\">{{ record.method }}</span>\n                </div>\n              </TableCell>\n              <TableCell class=\"text-foreground text-right text-sm font-bold tabular-nums\">\n                {{ record.amount }}\n              </TableCell>\n              <TableCell>\n                <Badge\n                  v-if=\"record.status === 'paid'\"\n                  variant=\"outline\"\n                  class=\"border-success/20 bg-success/10 text-success text-xs font-medium whitespace-normal\"\n                >\n                  <CheckCircle2 class=\"text-success size-3\" aria-hidden=\"true\" />\n                  {{ record.statusLabel }}\n                </Badge>\n                <Badge wrap v-else variant=\"outline\" class=\"border-info/20 bg-info/10 text-info text-xs font-medium\">\n                  <Clock class=\"text-info size-3\" aria-hidden=\"true\" />\n                  {{ record.statusLabel }}\n                </Badge>\n              </TableCell>\n              <TableCell class=\"text-right\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  class=\"text-muted-foreground hover:text-foreground h-8 gap-1.5 text-xs\"\n                  aria-label=\"Download receipt PDF\"\n                >\n                  <Download class=\"size-3.5\" aria-hidden=\"true\" />\n                  <span>Receipt</span>\n                </Button>\n              </TableCell>\n            </TableRow>\n          </TableBody>\n        </Table>\n      </div>\n\n      <div\n        class=\"text-muted-foreground flex flex-col gap-3 pt-1 text-xs sm:flex-row sm:items-center sm:justify-between\"\n      >\n        <p>\n          Showing <span class=\"text-foreground font-medium\">6</span> of\n          <span class=\"text-foreground font-medium\">6</span> lease payments · Lease Ref:\n          <span class=\"font-mono\">PH-4B-2026</span>\n        </p>\n        <div class=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"xs\" disabled>Previous</Button>\n          <Button variant=\"outline\" size=\"xs\" disabled>Next</Button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/TenantRentLedger.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/separator.json",
    "https://uipkge.dev/r/vue/switch.json",
    "https://uipkge.dev/r/vue/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"
  ]
}