61:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:T4e49,'use client' import * as React from 'react' import { useState } from 'react' import { Building2, Calendar, CheckCircle2, Clock, CreditCard, Download, Home, Landmark, ShieldCheck, Zap, } from 'lucide-react' import { cn } from '@/lib/utils' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Separator } from '@/components/ui/separator' import { Switch } from '@/components/ui/switch' import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table' export interface PaymentRecord { id: string period: string description: string dueDate: string paidDate: string method: string methodType: 'ach' | 'card' | 'wire' amount: string status: 'paid' | 'waived' statusLabel: string } const financialCards = [ { title: 'Monthly Base Rent', value: '$3,450.00', unit: '/ mo', description: 'Fixed lease rate through Jul 2027', icon: Home, iconColor: 'bg-primary/10 text-primary', }, { title: 'Next Due Date', value: 'Sep 01, 2026', unit: '', description: 'Due in 11 days · Grace period to Sep 5', highlightBadge: 'Due in 11 days', icon: Calendar, iconColor: 'bg-info/10 text-info', }, { title: 'Autopay Status', value: 'Active', unit: '', description: 'Scheduled for 1st of month with Visa •••• 4892', icon: Zap, iconColor: 'bg-success/10 text-success', }, { title: 'Security Deposit on File', value: '$3,450.00', unit: '', description: 'Held in Escrow (Interest Bearing)', icon: ShieldCheck, iconColor: 'bg-warning/10 text-warning', }, ] const paymentRecords: PaymentRecord[] = [ { id: 'pay-2026-08', period: 'August 2026 Rent', description: 'Base Rent ($3,400.00) + High-Speed Fiber ($50.00)', dueDate: 'Aug 01, 2026', paidDate: 'Aug 01, 2026', method: 'ACH Transfer · Chase •••• 4892', methodType: 'ach', amount: '$3,450.00', status: 'paid', statusLabel: 'Paid on Time', }, { id: 'pay-2026-07', period: 'July 2026 Rent', description: 'Base Rent ($3,400.00) + Assigned Parking Spot #4B ($50.00)', dueDate: 'Jul 01, 2026', paidDate: 'Jul 01, 2026', method: 'ACH Transfer · Chase •••• 4892', methodType: 'ach', amount: '$3,450.00', status: 'paid', statusLabel: 'Paid on Time', }, { id: 'pay-2026-06', period: 'June 2026 Rent', description: 'Base Rent ($3,400.00) + Water & Sewer Allocation ($50.00)', dueDate: 'Jun 01, 2026', paidDate: 'Jun 03, 2026', method: 'Visa •••• 4892', methodType: 'card', amount: '$3,450.00', status: 'waived', statusLabel: 'Late Fee Waived', }, { id: 'pay-2026-05', period: 'May 2026 Rent', description: 'Base Rent ($3,400.00) + Storage Locker #12 ($50.00)', dueDate: 'May 01, 2026', paidDate: 'May 01, 2026', method: 'ACH Transfer · Chase •••• 4892', methodType: 'ach', amount: '$3,450.00', status: 'paid', statusLabel: 'Paid on Time', }, { id: 'pay-2026-04', period: 'April 2026 Rent', description: 'First Full Month Base Rent ($3,400.00) + Pet Rent ($50.00)', dueDate: 'Apr 01, 2026', paidDate: 'Apr 01, 2026', method: 'ACH Transfer · Chase •••• 4892', methodType: 'ach', amount: '$3,450.00', status: 'paid', statusLabel: 'Paid on Time', }, { id: 'pay-2026-03-dep', period: 'Security Deposit & Move-In Fee', description: '100% Refundable Security Escrow Deposit + Key Fob Activation', dueDate: 'Mar 15, 2026', paidDate: 'Mar 15, 2026', method: 'Wire Transfer · Wells Fargo •••• 1044', methodType: 'wire', amount: '$3,450.00', status: 'paid', statusLabel: 'Paid on Time', }, ] export function TenantRentLedger({ className }: { className?: string }) { const [autopayEnabled, setAutopayEnabled] = useState(true) const [autopayDay, setAutopayDay] = useState<'1st' | '5th'>('1st') return (

{/* Resident & Unit Header */}

Elena Rostova

Unit 4B

{/* 4 Financial Overview Cards */}

{financialCards.map((card) => { const Icon = card.icon return (

{card.title}

{card.value}

{card.unit && {card.unit}}

{card.description}

) })}

{/* Autopay & Payment Method Card */}

Autopay & Payment Preferences Configure automatic monthly rent deduction and manage saved funding methods.

{autopayEnabled ? ( Autopay Active ) : ( Autopay Paused )}

{/* Toggle Autopay Switch */}

Enable Automatic Rent Deductions

Automatically charge your primary payment method on your selected schedule before due date.

{/* Primary Bank Account / Card */}

Primary Payment Method

Visa •••• 4892 Default

Elena Rostova · Expires 08/28 · Bank of America

{/* Autopay Date Selector (1st vs 5th) */}

Scheduled Deduction Date

Select when rent will be debited from your account each cycle.

{/* Payment History Ledger Table */}

Payment History & Ledger

Complete transaction record of monthly rent charges, utility allocations, and security deposits.

Billing Period & Description Due Date Paid Date Payment Method Amount Paid Status Actions {paymentRecords.map((record) => (

{record.period}

{record.description}

{record.dueDate} {record.paidDate}

{record.methodType === 'ach' && (

{record.amount} {record.status === 'paid' ? ( ) : ( )} ))}

Showing 6 of{' '} 6 lease payments · Lease Ref:{' '} PH-4B-2026

) } 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L61",null,{"namespace":"@registrydirectory","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"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"packages/registry-react/blocks/tenant-rent-ledger/TenantRentLedger.tsx","content":"$63","type":"registry:block","target":"~/components/blocks/TenantRentLedger.tsx"}],"className":"h-[70svh] min-h-80"}]]}]