{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "airbnb-host-earnings", "title": "Airbnb Host Earnings", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/airbnb-host-earnings/airbnb-host-earnings.component.ts", "content": "// Short-term rental host revenue dashboard: gross earnings, occupancy rate,\n// ADR & RevPAR metrics, payout schedule, dynamic pricing suggestions, and an\n// itemized reservation payout table. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport {\n Building2,\n Calendar,\n CalendarCheck,\n Check,\n CheckCircle2,\n Clock,\n DollarSign,\n Download,\n Home,\n Landmark,\n LucideAngularModule,\n TrendingUp,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent, UiAvatarImageComponent } from '@/ui/avatar/avatar.component'\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 { UiProgressComponent } from '@/ui/progress/progress.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\nexport type ReservationPayoutStatus = 'paid' | 'processing'\n\nexport interface ReservationGuest {\n name: string\n avatar: string\n initials: string\n}\n\nexport interface ReservationPayout {\n id: string\n confirmationCode: string\n guest: ReservationGuest\n property: string\n location: string\n datesBooked: string\n nightsCount: number\n nightlyRate: string\n cleaningFee: string\n hostServiceFee: string\n netPayout: string\n status: ReservationPayoutStatus\n}\n\nconst reservations: ReservationPayout[] = [\n {\n id: 'res-1',\n confirmationCode: 'HM-8924A',\n guest: {\n name: 'Sophia Martinez',\n avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&auto=format&fit=crop&q=80',\n initials: 'SM',\n },\n property: 'Malibu Beachfront Villa',\n location: 'Malibu, CA',\n datesBooked: 'Aug 18-24 (6 nights)',\n nightsCount: 6,\n nightlyRate: '$650.00',\n cleaningFee: '$350.00',\n hostServiceFee: '-$127.50',\n netPayout: '$4,122.50',\n status: 'paid',\n },\n {\n id: 'res-2',\n confirmationCode: 'HM-8919B',\n guest: {\n name: 'David Kim',\n avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&auto=format&fit=crop&q=80',\n initials: 'DK',\n },\n property: 'Aspen Luxury Chalet',\n location: 'Aspen, CO',\n datesBooked: 'Aug 12-16 (4 nights)',\n nightsCount: 4,\n nightlyRate: '$720.00',\n cleaningFee: '$250.00',\n hostServiceFee: '-$94.00',\n netPayout: '$3,036.00',\n status: 'paid',\n },\n {\n id: 'res-3',\n confirmationCode: 'HM-8912C',\n guest: {\n name: 'Elena Rostova',\n avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150&auto=format&fit=crop&q=80',\n initials: 'ER',\n },\n property: 'Maui Oceanfront Suite',\n location: 'Maui, HI',\n datesBooked: 'Aug 04-10 (6 nights)',\n nightsCount: 6,\n nightlyRate: '$580.00',\n cleaningFee: '$300.00',\n hostServiceFee: '-$113.40',\n netPayout: '$3,666.60',\n status: 'paid',\n },\n {\n id: 'res-4',\n confirmationCode: 'HM-8931D',\n guest: {\n name: 'Marcus Vance',\n avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=150&auto=format&fit=crop&q=80',\n initials: 'MV',\n },\n property: 'Malibu Beachfront Villa',\n location: 'Malibu, CA',\n datesBooked: 'Aug 25-31 (6 nights)',\n nightsCount: 6,\n nightlyRate: '$690.00',\n cleaningFee: '$350.00',\n hostServiceFee: '-$134.70',\n netPayout: '$4,355.30',\n status: 'processing',\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-airbnb-host-earnings, [ui-airbnb-host-earnings]',\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 UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiAvatarImageComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiProgressComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n \n
\n
\n

\n Host Earnings & Revenue Analytics\n

\n

\n Short-term rental portfolio revenue, occupancy yield metrics, and automated payout disbursement schedule.\n

\n
\n
\n \n \n \n All Properties (3)\n Malibu Beachfront Villa\n Aspen Luxury Chalet\n Maui Oceanfront Suite\n \n \n\n \n \n \n This Month · August 2026\n Last Month · July 2026\n Last 90 Days (Peak Summer)\n Year to Date · 2026\n \n \n\n \n
\n
\n\n \n
\n
\n
\n
\n
\n \n \n
\n

Gross Earnings

\n
\n \n +14.2% vs last month\n \n
\n
\n
\n
\n
\n $18,450.00\n
\n

Net after 3% fee: $17,896.50

\n
\n
\n
\n Projected month-end:\n $21,400.00\n
\n
\n
\n
\n\n
\n
\n
\n
\n \n \n
\n

Occupancy Rate

\n
\n \n +6.2% vs area avg\n \n
\n
\n
\n
\n
\n 88.5%\n
\n

27 of 31 nights booked

\n
\n
\n \n
\n 4 nights open\n 2 instant holds\n
\n
\n
\n
\n\n
\n
\n
\n
\n \n \n
\n

Average Daily Rate (ADR)

\n
\n \n +$45.00 vs baseline\n \n
\n
\n
\n
\n
\n $683.33\n / night\n
\n

Blended across active portfolio

\n
\n
\n
\n Weekend surge rate:\n $820.00 / night\n
\n
\n
\n
\n\n
\n
\n
\n
\n \n \n
\n

RevPAR (Yield / Unit)

\n
\n \n +18.4% YoY\n \n
\n
\n
\n
\n
\n $604.75\n
\n

Market benchmark: $512.00

\n
\n
\n
\n Regional yield index:\n Top 5% in submarket\n
\n
\n
\n \n \n\n \n
\n
\n
\n
\n
\n

Upcoming Payouts Schedule

\n

\n Automated direct deposits sent to your verified checking account 24 hours post check-in.\n

\n
\n \n \n Auto-Transfer Active\n \n
\n
\n
\n
\n
\n
\n \n \n
\n
\n Next Payout\n
$4,250.00
\n

\n Direct Deposit to Chase •••• 4892 ·\n Arriving Aug 24\n

\n
\n
\n Scheduled\n
\n
\n\n
\n
\n Completed payouts YTD\n
$92,400.00
\n

18 completed disbursement cycles

\n
\n
\n Settlement routing\n
JPMorgan Chase Bank
\n

Routing: 021000021 · $0 held

\n
\n
\n\n
\n

Payouts release automatically 24h after each guest check-in.

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

Dynamic Pricing Suggestions

\n

\n Machine-learning demand forecasts and local holiday surge pricing recommendations.\n

\n
\n \n \n Smart Rates\n \n
\n
\n
\n
\n
\n \n \n
\n
\n
\n

\n High demand weekend Sep 4-7: increase ADR by +15%\n

\n Labor Day Peak\n
\n

\n Regional guest search volume is up +48% in Malibu and Maui. Raising base rate from $680.00 to\n $782.00/night captures peak holiday yield.\n

\n\n
\n
\n Current ADR:\n

$680.00 / night

\n
\n
\n Suggested ADR:\n

$782.00 (+15%)

\n
\n
\n Est. Extra Rev:\n

+$408.00 (4 nights)

\n
\n
\n
\n
\n
\n\n @if (isPricingApplied()) {\n \n
\n \n Suggested +15% rate applied for Sep 4-7 ($782.00/night).\n
\n \n
\n } @else {\n
\n Algorithm confidence score: 96%\n
\n \n \n
\n
\n }\n \n \n \n\n \n
\n
\n
\n
\n

Monthly Revenue Breakdown

\n

\n Itemized guest reservations, cleaning fee payouts, platform service commissions, and net disbursements.\n

\n
\n \n 4 reservations · August 2026\n \n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n @for (res of reservations; track res.id) {\n \n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n \n }\n \n
Guest & ReservationProperty BookedDates BookedNightly RateCleaning FeeHost Fee (3%)Net PayoutStatus
\n
\n \n \n {{ res.guest.initials }}\n \n
\n
{{ res.guest.name }}
\n
\n {{ res.confirmationCode }}\n
\n
\n
\n 		\n
\n
{{ res.property }}
\n
{{ res.location }}
\n
\n 		\n
{{ res.datesBooked }}
\n 		\n
{{ res.nightlyRate }}
\n
{{ res.nightsCount }} nights
\n 		\n {{ res.cleaningFee }}\n \n {{ res.hostServiceFee }}\n \n {{ res.netPayout }}\n \n \n @if (res.status === 'paid') {\n \n \n Paid\n \n } @else {\n \n \n Processing\n \n }\n \n
\n
\n
\n
\n \n `,\n})\nexport class UiAirbnbHostEarningsComponent {\n protected readonly Building2 = Building2\n protected readonly Calendar = Calendar\n protected readonly CalendarCheck = CalendarCheck\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Clock = Clock\n protected readonly DollarSign = DollarSign\n protected readonly Download = Download\n protected readonly Home = Home\n protected readonly Landmark = Landmark\n protected readonly TrendingUp = TrendingUp\n\n protected readonly reservations = reservations\n\n @Input() set initialProperty(v: string | undefined) {\n this.selectedProperty.set(v ?? 'all')\n }\n @Input() set initialTimeframe(v: string | undefined) {\n this.selectedTimeframe.set(v ?? 'this-month')\n }\n @Input('class') className?: string\n\n readonly selectedProperty = signal('all')\n readonly selectedTimeframe = signal('this-month')\n readonly isPricingApplied = signal(false)\n\n get rootClass(): string {\n return cn('mx-auto w-full max-w-6xl space-y-6', this.className)\n }\n\n statusBadgeClass(res: ReservationPayout): string {\n return cn(\n 'text-xs font-semibold tabular-nums',\n res.status === 'paid' && 'border-success/20 bg-success/10 text-success',\n res.status === 'processing' && 'border-info/20 bg-info/10 text-info',\n )\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/airbnb-host-earnings/airbnb-host-earnings.component.ts" }, { "path": "packages/registry-angular/blocks/airbnb-host-earnings/index.ts", "content": "export {\n UiAirbnbHostEarningsComponent,\n type ReservationGuest,\n type ReservationPayout,\n type ReservationPayoutStatus,\n} from './airbnb-host-earnings.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/airbnb-host-earnings/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "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/progress.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/table.json" ], "description": "Short-term rental host revenue dashboard: gross earnings with month-over-month growth, occupancy rate progress, ADR & RevPAR metrics, automated direct deposit payout schedule card, dynamic pricing AI rate recommendations, and an itemized reservation payout breakdown table.", "categories": [ "real-estate", "dashboard", "hospitality", "analytics", "finance", "app" ] }