{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "tenant-rent-ledger", "title": "Tenant Rent Ledger", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/tenant-rent-ledger/tenant-rent-ledger.component.ts", "content": "// Property management resident portal with tenant header, 4 financial\n// overview cards (monthly rent, next due date, autopay status, escrow deposit),\n// autopay toggle with date schedule selection, and a complete 6-record payment\n// ledger with receipt actions. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport {\n Building2,\n Calendar,\n CheckCircle2,\n Clock,\n CreditCard,\n Download,\n Home,\n Landmark,\n LucideAngularModule,\n ShieldCheck,\n Zap,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiSwitchComponent } from '@/ui/switch/switch.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\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\ninterface FinancialCard {\n title: string\n value: string\n unit: string\n description: string\n icon: typeof Home\n iconColor: string\n}\n\nconst financialCards: FinancialCard[] = [\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 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\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-tenant-rent-ledger, [ui-tenant-rent-ledger]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiSeparatorComponent,\n UiSwitchComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n \n \n
\n
\n

Elena Rostova

\n Unit 4B \n \n \n $0.00 Paid in Full\n \n
\n
\n \n Pacific Heights Luxury Residences, San Francisco\n
\n
\n
\n \n
\n
\n\n \n
\n @for (card of financeCards; track card.title) {\n
\n
\n
\n

{{ card.title }}

\n
\n \n
\n
\n
\n
\n

{{ card.value }}

\n @if (card.unit) {\n {{ card.unit }}\n }\n
\n

{{ card.description }}

\n
\n
\n
\n }\n
\n\n \n
\n
\n
\n
\n

Autopay & Payment Preferences

\n

\n Configure automatic monthly rent deduction and manage saved funding methods.\n

\n
\n @if (autopayEnabled()) {\n \n Autopay Active\n \n } @else {\n Autopay Paused \n }\n
\n
\n
\n \n \n
\n \n

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

\n
\n \n
\n\n
\n\n \n
\n
\n

\n Primary Payment Method\n

\n \n
\n
\n
\n \n \n
\n
\n
\n Visa •••• 4892\n Default\n
\n

Elena Rostova · Expires 08/28 · Bank of America

\n
\n
\n
\n \n \n Verified for ACH & Debit\n \n
\n
\n
\n\n
\n\n \n
\n
\n

\n Scheduled Deduction Date\n

\n

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

\n
\n
\n \n
\n @if (autopayDay() === '1st' && autopayEnabled()) {\n \n }\n
\n
\n
\n 1st of the month\n \n Recommended\n \n
\n

\n Debited promptly on the rent due date. Ensures zero delinquency risk.\n

\n
\n \n\n \n
\n @if (autopayDay() === '5th' && autopayEnabled()) {\n \n }\n
\n
\n
\n 5th of the month\n Grace Period \n
\n

\n Processes within the standard 5-day building grace window before late fees.\n

\n
\n \n
\n
\n
\n \n\n \n
\n
\n
\n

Payment History & Ledger

\n

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

\n
\n \n \n Download Statement (PDF)\n \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n @for (record of records; track record.id) {\n \n \n \n \n \n \n \n \n \n }\n \n
Billing Period & DescriptionDue DatePaid DatePayment MethodAmount PaidStatusActions
\n
{{ record.period }}
\n
{{ record.description }}
\n 		{{ record.dueDate }}{{ record.paidDate }}\n
\n @if (record.methodType === 'ach') {\n \n } @else if (record.methodType === 'card') {\n \n } @else {\n \n }\n {{ record.method }}\n
\n 		\n {{ record.amount }}\n \n @if (record.status === 'paid') {\n \n \n {{ record.statusLabel }}\n \n } @else {\n \n \n {{ record.statusLabel }}\n \n }\n \n \n \n Receipt\n \n
\n
\n\n \n

\n Showing 6 of\n 6 lease payments · Lease Ref:\n PH-4B-2026\n

\n
\n \n \n
\n
\n \n \n `,\n})\nexport class UiTenantRentLedgerComponent {\n protected readonly Building2 = Building2\n protected readonly Calendar = Calendar\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Clock = Clock\n protected readonly CreditCard = CreditCard\n protected readonly Download = Download\n protected readonly Home = Home\n protected readonly Landmark = Landmark\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Zap = Zap\n\n protected readonly financeCards = financialCards\n protected readonly records = paymentRecords\n\n @Input('class') className?: string\n\n readonly autopayEnabled = signal(true)\n readonly autopayDay = signal<'1st' | '5th'>('1st')\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n cardIconClass(card: FinancialCard): string {\n return cn('flex size-8 shrink-0 items-center justify-center rounded-lg', card.iconColor)\n }\n\n scheduleOptionClass(day: '1st' | '5th'): string {\n return 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 this.autopayDay() === day && this.autopayEnabled()\n ? 'border-primary bg-primary/5 ring-primary ring-1'\n : 'border-border hover:bg-muted/50',\n )\n }\n\n scheduleRadioClass(day: '1st' | '5th'): string {\n return cn(\n 'mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border transition-colors',\n this.autopayDay() === day && this.autopayEnabled()\n ? 'border-primary bg-primary text-primary-foreground'\n : 'border-muted-foreground/50',\n )\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/tenant-rent-ledger/tenant-rent-ledger.component.ts" }, { "path": "packages/registry-angular/blocks/tenant-rent-ledger/index.ts", "content": "export { UiTenantRentLedgerComponent, type PaymentRecord } from './tenant-rent-ledger.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/tenant-rent-ledger/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/switch.json", "https://uipkge.dev/r/angular/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" ] }