{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "airbnb-host-earnings",
  "title": "Airbnb Host Earnings",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/airbnb-host-earnings/AirbnbHostEarnings.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n  Building2,\n  Calendar,\n  CalendarCheck,\n  Check,\n  CheckCircle2,\n  Clock,\n  DollarSign,\n  Download,\n  Home,\n  Landmark,\n  TrendingUp,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\ninterface ReservationPayout {\n  id: string\n  confirmationCode: string\n  guest: {\n    name: string\n    avatar: string\n    initials: string\n  }\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: 'paid' | 'processing'\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\nexport function AirbnbHostEarnings({ className }: { className?: string }) {\n  const [selectedProperty, setSelectedProperty] = React.useState('all')\n  const [selectedTimeframe, setSelectedTimeframe] = React.useState('this-month')\n  const [isPricingApplied, setIsPricingApplied] = React.useState(false)\n\n  return (\n    <div data-slot=\"airbnb-host-earnings\" className={cn('mx-auto w-full max-w-6xl space-y-6', className)}>\n      {/* Header Section */}\n      <div className=\"flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between\">\n        <div className=\"space-y-1\">\n          <h1 className=\"text-foreground text-2xl font-bold tracking-tight sm:text-3xl\">\n            Host Earnings &amp; Revenue Analytics\n          </h1>\n          <p className=\"text-muted-foreground text-sm\">\n            Short-term rental portfolio revenue, occupancy yield metrics, and automated payout disbursement schedule.\n          </p>\n        </div>\n        <div className=\"flex flex-wrap items-center gap-2.5\">\n          <Select value={selectedProperty} onValueChange={setSelectedProperty}>\n            <SelectTrigger className=\"w-48 text-xs\" aria-label=\"Select property\">\n              <Home className=\"text-muted-foreground mr-1.5 size-3.5\" />\n              <SelectValue placeholder=\"Select property\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"all\">All Properties (3)</SelectItem>\n              <SelectItem value=\"malibu\">Malibu Beachfront Villa</SelectItem>\n              <SelectItem value=\"aspen\">Aspen Luxury Chalet</SelectItem>\n              <SelectItem value=\"maui\">Maui Oceanfront Suite</SelectItem>\n            </SelectContent>\n          </Select>\n\n          <Select value={selectedTimeframe} onValueChange={setSelectedTimeframe}>\n            <SelectTrigger className=\"w-52 text-xs\" aria-label=\"Select timeframe\">\n              <Calendar className=\"text-muted-foreground mr-1.5 size-3.5\" />\n              <SelectValue placeholder=\"Select timeframe\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"this-month\">This Month · August 2026</SelectItem>\n              <SelectItem value=\"last-month\">Last Month · July 2026</SelectItem>\n              <SelectItem value=\"q3\">Last 90 Days (Peak Summer)</SelectItem>\n              <SelectItem value=\"ytd\">Year to Date · 2026</SelectItem>\n            </SelectContent>\n          </Select>\n\n          <Button aria-label=\"Download attachment\" variant=\"outline\" size=\"sm\" className=\"gap-1.5 text-xs\">\n            <Download className=\"size-3.5\" />\n            <span>Export Tax 1099 CSV</span>\n          </Button>\n        </div>\n      </div>\n\n      {/* 4 Primary Host KPI Cards */}\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        {/* Gross Earnings */}\n        <Card className=\"flex flex-col justify-between shadow-xs\">\n          <CardHeader className=\"pb-2\">\n            <div className=\"flex items-center justify-between gap-2\">\n              <div className=\"flex flex-wrap items-center gap-2\">\n                <div\n                  className=\"border-success/20 bg-success/10 text-success text-success flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n                  aria-hidden=\"true\"\n                >\n                  <DollarSign className=\"size-4\" />\n                </div>\n                <CardTitle className=\"text-muted-foreground text-sm font-medium\">Gross Earnings</CardTitle>\n              </div>\n              <Badge\n                wrap\n                variant=\"outline\"\n                className=\"border-success/20 bg-success/10 text-success text-success text-xs font-bold tabular-nums\"\n              >\n                +14.2% vs last month\n              </Badge>\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-3\">\n            <div>\n              <div className=\"flex items-baseline gap-1.5\">\n                <span className=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">$18,450.00</span>\n              </div>\n              <p className=\"text-muted-foreground mt-0.5 text-xs\">Net after 3% fee: $17,896.50</p>\n            </div>\n            <div className=\"border-border/60 border-t pt-2 text-xs\">\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-muted-foreground\">Projected month-end:</span>\n                <span className=\"text-foreground font-semibold tabular-nums\">$21,400.00</span>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        {/* Occupancy Rate */}\n        <Card className=\"flex flex-col justify-between shadow-xs\">\n          <CardHeader className=\"pb-2\">\n            <div className=\"flex items-center justify-between gap-2\">\n              <div className=\"flex flex-wrap items-center gap-2\">\n                <div\n                  className=\"border-border bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n                  aria-hidden=\"true\"\n                >\n                  <CalendarCheck className=\"size-4\" />\n                </div>\n                <CardTitle className=\"text-muted-foreground text-sm font-medium\">Occupancy Rate</CardTitle>\n              </div>\n              <Badge\n                wrap\n                variant=\"outline\"\n                className=\"border-success/20 bg-success/10 text-success text-success text-xs font-bold tabular-nums\"\n              >\n                +6.2% vs area avg\n              </Badge>\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-3\">\n            <div>\n              <div className=\"flex items-baseline gap-1.5\">\n                <span className=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">88.5%</span>\n              </div>\n              <p className=\"text-muted-foreground mt-0.5 text-xs tabular-nums\">27 of 31 nights booked</p>\n            </div>\n            <div className=\"space-y-1.5\">\n              <Progress\n                value={88.5}\n                className=\"[&_[data-slot=progress-indicator]]:bg-success dark:[&_[data-slot=progress-indicator]]:bg-success h-1.5\"\n              />\n              <div className=\"text-muted-foreground flex items-center justify-between text-xs tabular-nums\">\n                <span>4 nights open</span>\n                <span>2 instant holds</span>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        {/* Average Daily Rate (ADR) */}\n        <Card className=\"flex flex-col justify-between shadow-xs\">\n          <CardHeader className=\"pb-2\">\n            <div className=\"flex items-center justify-between gap-2\">\n              <div className=\"flex flex-wrap items-center gap-2\">\n                <div\n                  className=\"border-border bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n                  aria-hidden=\"true\"\n                >\n                  <TrendingUp className=\"size-4\" />\n                </div>\n                <CardTitle className=\"text-muted-foreground text-sm font-medium\">Average Daily Rate (ADR)</CardTitle>\n              </div>\n              <Badge\n                wrap\n                variant=\"outline\"\n                className=\"border-success/20 bg-success/10 text-success text-success text-xs font-medium tabular-nums\"\n              >\n                +$45.00 vs baseline\n              </Badge>\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-3\">\n            <div>\n              <div className=\"flex items-baseline gap-1\">\n                <span className=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">$683.33</span>\n                <span className=\"text-muted-foreground text-xs font-normal\">/ night</span>\n              </div>\n              <p className=\"text-muted-foreground mt-0.5 text-xs\">Blended across active portfolio</p>\n            </div>\n            <div className=\"border-border/60 border-t pt-2 text-xs\">\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-muted-foreground\">Weekend surge rate:</span>\n                <span className=\"text-foreground font-semibold tabular-nums\">$820.00 / night</span>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        {/* RevPAR (Revenue per Available Room) */}\n        <Card className=\"flex flex-col justify-between shadow-xs\">\n          <CardHeader className=\"pb-2\">\n            <div className=\"flex items-center justify-between gap-2\">\n              <div className=\"flex flex-wrap items-center gap-2\">\n                <div\n                  className=\"border-border bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n                  aria-hidden=\"true\"\n                >\n                  <Building2 className=\"size-4\" />\n                </div>\n                <CardTitle className=\"text-muted-foreground text-sm font-medium\">RevPAR (Yield / Unit)</CardTitle>\n              </div>\n              <Badge\n                wrap\n                variant=\"outline\"\n                className=\"border-success/20 bg-success/10 text-success text-success text-xs font-bold tabular-nums\"\n              >\n                +18.4% YoY\n              </Badge>\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-3\">\n            <div>\n              <div className=\"flex items-baseline gap-1.5\">\n                <span className=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">$604.75</span>\n              </div>\n              <p className=\"text-muted-foreground mt-0.5 text-xs tabular-nums\">Market benchmark: $512.00</p>\n            </div>\n            <div className=\"border-border/60 border-t pt-2 text-xs\">\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-muted-foreground\">Regional yield index:</span>\n                <span className=\"text-success font-semibold\">Top 5% in submarket</span>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n\n      {/* Middle Grid: Upcoming Payouts Schedule & Dynamic Pricing Suggestions */}\n      <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-2\">\n        {/* Upcoming Payouts Schedule Card */}\n        <Card className=\"flex flex-col justify-between shadow-xs\">\n          <CardHeader>\n            <div className=\"flex items-center justify-between\">\n              <div className=\"space-y-1\">\n                <CardTitle>Upcoming Payouts Schedule</CardTitle>\n                <CardDescription>\n                  Automated direct deposits sent to your verified checking account 24 hours post check-in.\n                </CardDescription>\n              </div>\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=\"mr-1 size-3\" />\n                Auto-Transfer Active\n              </Badge>\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-4\">\n            {/* Next Payout Focus Box */}\n            <div className=\"border-border bg-muted/40 rounded-lg border p-4\">\n              <div className=\"flex items-start justify-between gap-4\">\n                <div className=\"flex items-start gap-3\">\n                  <div className=\"border-success/20 bg-success/10 text-success flex size-9 shrink-0 items-center justify-center rounded-lg border\">\n                    <Landmark className=\"size-4.5\" />\n                  </div>\n                  <div className=\"space-y-0.5\">\n                    <span className=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">\n                      Next Payout\n                    </span>\n                    <div className=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">$4,250.00</div>\n                    <p className=\"text-foreground text-xs font-medium\">\n                      Direct Deposit to Chase •••• 4892 ·{' '}\n                      <span className=\"text-success font-semibold\">Arriving Aug 24</span>\n                    </p>\n                  </div>\n                </div>\n                <Badge wrap variant=\"secondary\" className=\"text-xs\">\n                  Scheduled\n                </Badge>\n              </div>\n            </div>\n\n            {/* Completed YTD & Bank Info Row */}\n            <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n              <div className=\"border-border bg-card rounded-lg border p-3.5 shadow-xs\">\n                <span className=\"text-muted-foreground text-xs font-medium\">Completed payouts YTD</span>\n                <div className=\"text-foreground mt-1 text-xl font-bold tracking-tight tabular-nums\">$92,400.00</div>\n                <p className=\"text-muted-foreground mt-0.5 text-xs\">18 completed disbursement cycles</p>\n              </div>\n              <div className=\"border-border bg-card rounded-lg border p-3.5 shadow-xs\">\n                <span className=\"text-muted-foreground text-xs font-medium\">Settlement routing</span>\n                <div className=\"text-foreground mt-1 text-sm font-semibold\">JPMorgan Chase Bank</div>\n                <p className=\"text-muted-foreground mt-0.5 text-xs tabular-nums\">Routing: 021000021 · $0 held</p>\n              </div>\n            </div>\n\n            <div className=\"flex items-center justify-between pt-1\">\n              <p className=\"text-muted-foreground text-xs\">\n                Payouts release automatically 24h after each guest check-in.\n              </p>\n              <Button variant=\"outline\" size=\"sm\" className=\"gap-1.5 text-xs\">\n                <Building2 className=\"size-3.5\" />\n                <span>Manage Bank Account</span>\n              </Button>\n            </div>\n          </CardContent>\n        </Card>\n\n        {/* Dynamic Pricing Suggestions Card */}\n        <Card className=\"flex flex-col justify-between shadow-xs\">\n          <CardHeader>\n            <div className=\"flex items-center justify-between\">\n              <div className=\"space-y-1\">\n                <CardTitle>Dynamic Pricing Suggestions</CardTitle>\n                <CardDescription>\n                  Machine-learning demand forecasts and local holiday surge pricing recommendations.\n                </CardDescription>\n              </div>\n              <Badge\n                wrap\n                variant=\"outline\"\n                className=\"border-warning/20 bg-warning/10 text-warning gap-1 text-xs font-semibold\"\n              >\n                <TrendingUp className=\"size-3\" />\n                Smart Rates\n              </Badge>\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-4\">\n            {/* Suggestion Banner Box */}\n            <div className=\"border-border/80 bg-muted/30 hover:bg-muted/50 rounded-lg border p-4 transition-colors\">\n              <div className=\"flex items-start gap-3\">\n                <div className=\"border-warning/20 bg-warning/10 text-warning text-warning mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs\">\n                  <TrendingUp className=\"size-4\" />\n                </div>\n                <div className=\"flex-1 space-y-2\">\n                  <div className=\"flex flex-wrap items-center justify-between gap-2\">\n                    <h4 className=\"text-foreground text-sm font-semibold\">\n                      High demand weekend Sep 4-7: increase ADR by +15%\n                    </h4>\n                    <Badge wrap variant=\"outline\" className=\"text-xs font-medium\">\n                      Labor Day Peak\n                    </Badge>\n                  </div>\n                  <p className=\"text-muted-foreground text-xs leading-relaxed\">\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                  </p>\n\n                  <div className=\"border-border/60 grid grid-cols-1 gap-2 border-t pt-2.5 text-xs sm:grid-cols-3\">\n                    <div>\n                      <span className=\"text-muted-foreground\">Current ADR:</span>\n                      <p className=\"text-foreground font-semibold tabular-nums\">$680.00 / night</p>\n                    </div>\n                    <div>\n                      <span className=\"text-muted-foreground\">Suggested ADR:</span>\n                      <p className=\"text-success text-success font-semibold tabular-nums\">$782.00 (+15%)</p>\n                    </div>\n                    <div className=\"sm:text-right\">\n                      <span className=\"text-muted-foreground\">Est. Extra Rev:</span>\n                      <p className=\"text-foreground font-semibold tabular-nums\">+$408.00 (4 nights)</p>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            {/* Applied State / Action Buttons */}\n            {isPricingApplied ? (\n              <div className=\"border-success/20 bg-success/10 flex items-center justify-between rounded-lg border p-3 text-xs\">\n                <div className=\"text-success flex flex-wrap items-center gap-2 font-medium\">\n                  <CheckCircle2 className=\"size-4 shrink-0\" />\n                  <span>Suggested +15% rate applied for Sep 4-7 ($782.00/night).</span>\n                </div>\n                <Button variant=\"ghost\" size=\"sm\" className=\"h-7 text-xs\" onClick={() => setIsPricingApplied(false)}>\n                  Undo\n                </Button>\n              </div>\n            ) : (\n              <div className=\"flex flex-wrap items-center justify-between gap-2 pt-1\">\n                <span className=\"text-muted-foreground text-xs\">Algorithm confidence score: 96%</span>\n                <div className=\"flex flex-wrap items-center gap-2\">\n                  <Button variant=\"outline\" size=\"sm\" className=\"text-xs\">\n                    Customize Rules\n                  </Button>\n                  <Button size=\"sm\" className=\"gap-1.5 text-xs\" onClick={() => setIsPricingApplied(true)}>\n                    <Check className=\"size-3.5\" />\n                    <span>Apply Suggested Rate</span>\n                  </Button>\n                </div>\n              </div>\n            )}\n          </CardContent>\n        </Card>\n      </div>\n\n      {/* Monthly Revenue Breakdown Table Card */}\n      <Card className=\"shadow-xs\">\n        <CardHeader>\n          <div className=\"flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between\">\n            <div>\n              <CardTitle>Monthly Revenue Breakdown</CardTitle>\n              <CardDescription>\n                Itemized guest reservations, cleaning fee payouts, platform service commissions, and net disbursements.\n              </CardDescription>\n            </div>\n            <Badge wrap variant=\"outline\" className=\"w-fit text-xs font-normal tabular-nums\">\n              4 reservations · August 2026\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardContent className=\"p-0 sm:p-6 sm:pt-0\">\n          <div className=\"overflow-x-auto\">\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead className=\"min-w-[180px]\">Guest &amp; Reservation</TableHead>\n                  <TableHead className=\"min-w-[160px]\">Property Booked</TableHead>\n                  <TableHead>Dates Booked</TableHead>\n                  <TableHead className=\"text-right\">Nightly Rate</TableHead>\n                  <TableHead className=\"text-right\">Cleaning Fee</TableHead>\n                  <TableHead className=\"text-right\">Host Fee (3%)</TableHead>\n                  <TableHead className=\"text-right\">Net Payout</TableHead>\n                  <TableHead className=\"text-right\">Status</TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                {reservations.map((res) => (\n                  <TableRow key={res.id} className=\"hover:bg-muted/50\">\n                    {/* Guest Column */}\n                    <TableCell>\n                      <div className=\"flex items-center gap-3\">\n                        <Avatar size=\"sm\" className=\"shrink-0\">\n                          <AvatarImage src={res.guest.avatar} alt={res.guest.name} />\n                          <AvatarFallback className=\"text-xs font-medium\">{res.guest.initials}</AvatarFallback>\n                        </Avatar>\n                        <div className=\"space-y-0.5\">\n                          <div className=\"text-foreground text-sm font-semibold\">{res.guest.name}</div>\n                          <div className=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                            {res.confirmationCode}\n                          </div>\n                        </div>\n                      </div>\n                    </TableCell>\n\n                    {/* Property Booked */}\n                    <TableCell>\n                      <div className=\"space-y-0.5\">\n                        <div className=\"text-foreground text-sm font-medium\">{res.property}</div>\n                        <div className=\"text-muted-foreground text-xs\">{res.location}</div>\n                      </div>\n                    </TableCell>\n\n                    {/* Dates Booked */}\n                    <TableCell>\n                      <div className=\"text-foreground text-xs font-medium tabular-nums\">{res.datesBooked}</div>\n                    </TableCell>\n\n                    {/* Nightly Rate */}\n                    <TableCell className=\"text-right\">\n                      <div className=\"text-foreground text-xs font-semibold tabular-nums\">{res.nightlyRate}</div>\n                      <div className=\"text-muted-foreground text-xs tabular-nums\">{res.nightsCount} nights</div>\n                    </TableCell>\n\n                    {/* Cleaning Fee */}\n                    <TableCell className=\"text-muted-foreground text-right text-xs tabular-nums\">\n                      {res.cleaningFee}\n                    </TableCell>\n\n                    {/* Host Service Fee */}\n                    <TableCell className=\"text-muted-foreground text-right text-xs tabular-nums\">\n                      {res.hostServiceFee}\n                    </TableCell>\n\n                    {/* Net Payout */}\n                    <TableCell className=\"text-foreground text-right text-sm font-bold tabular-nums\">\n                      {res.netPayout}\n                    </TableCell>\n\n                    {/* Status Badge */}\n                    <TableCell className=\"text-right\">\n                      <Badge\n                        variant=\"outline\"\n                        className={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                        {res.status === 'paid' ? (\n                          <span className=\"flex items-center gap-1\">\n                            <Check className=\"size-3\" />\n                            Paid\n                          </span>\n                        ) : (\n                          <span className=\"flex items-center gap-1\">\n                            <Clock className=\"size-3\" />\n                            Processing\n                          </span>\n                        )}\n                      </Badge>\n                    </TableCell>\n                  </TableRow>\n                ))}\n              </TableBody>\n            </Table>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n\nexport default AirbnbHostEarnings\n",
      "type": "registry:block",
      "target": "~/components/blocks/AirbnbHostEarnings.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/avatar.json",
    "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/progress.json",
    "https://uipkge.dev/r/react/select.json",
    "https://uipkge.dev/r/react/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"
  ]
}