{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "airbnb-host-earnings",
  "title": "Airbnb Host Earnings",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/airbnb-host-earnings/AirbnbHostEarnings.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref, type HTMLAttributes } from 'vue'\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-vue-next'\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\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst selectedProperty = ref('all')\nconst selectedTimeframe = ref('this-month')\nconst isPricingApplied = ref(false)\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</script>\n\n<template>\n  <div data-slot=\"airbnb-host-earnings\" :class=\"cn('mx-auto w-full max-w-6xl space-y-6', props.class)\">\n    <!-- Header Section -->\n    <div class=\"flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between\">\n      <div class=\"space-y-1\">\n        <h1 class=\"text-foreground text-2xl font-bold tracking-tight sm:text-3xl\">\n          Host Earnings &amp; Revenue Analytics\n        </h1>\n        <p class=\"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 class=\"flex flex-wrap items-center gap-2.5\">\n        <Select v-model=\"selectedProperty\">\n          <SelectTrigger class=\"w-48 text-xs\" aria-label=\"Select property\">\n            <Home class=\"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 v-model=\"selectedTimeframe\">\n          <SelectTrigger class=\"w-52 text-xs\" aria-label=\"Select timeframe\">\n            <Calendar class=\"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\" class=\"gap-1.5 text-xs\">\n          <Download class=\"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 class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <!-- Gross Earnings -->\n      <Card class=\"flex flex-col justify-between shadow-xs\">\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex items-center justify-between gap-2\">\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <div\n                class=\"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 class=\"size-4\" />\n              </div>\n              <CardTitle class=\"text-muted-foreground text-sm font-medium\">Gross Earnings</CardTitle>\n            </div>\n            <Badge\n              wrap\n              variant=\"outline\"\n              class=\"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 class=\"space-y-3\">\n          <div>\n            <div class=\"flex items-baseline gap-1.5\">\n              <span class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">$18,450.00</span>\n            </div>\n            <p class=\"text-muted-foreground mt-0.5 text-xs\">Net after 3% fee: $17,896.50</p>\n          </div>\n          <div class=\"border-border/60 border-t pt-2 text-xs\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-muted-foreground\">Projected month-end:</span>\n              <span class=\"text-foreground font-semibold tabular-nums\">$21,400.00</span>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Occupancy Rate -->\n      <Card class=\"flex flex-col justify-between shadow-xs\">\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex items-center justify-between gap-2\">\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <div\n                class=\"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 class=\"size-4\" />\n              </div>\n              <CardTitle class=\"text-muted-foreground text-sm font-medium\">Occupancy Rate</CardTitle>\n            </div>\n            <Badge\n              wrap\n              variant=\"outline\"\n              class=\"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 class=\"space-y-3\">\n          <div>\n            <div class=\"flex items-baseline gap-1.5\">\n              <span class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">88.5%</span>\n            </div>\n            <p class=\"text-muted-foreground mt-0.5 text-xs tabular-nums\">27 of 31 nights booked</p>\n          </div>\n          <div class=\"space-y-1.5\">\n            <Progress\n              :model-value=\"88.5\"\n              class=\"[&_[data-slot=progress-indicator]]:bg-success dark:[&_[data-slot=progress-indicator]]:bg-success h-1.5\"\n            />\n            <div class=\"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 class=\"flex flex-col justify-between shadow-xs\">\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex items-center justify-between gap-2\">\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <div\n                class=\"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 class=\"size-4\" />\n              </div>\n              <CardTitle class=\"text-muted-foreground text-sm font-medium\">Average Daily Rate (ADR)</CardTitle>\n            </div>\n            <Badge\n              wrap\n              variant=\"outline\"\n              class=\"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 class=\"space-y-3\">\n          <div>\n            <div class=\"flex items-baseline gap-1\">\n              <span class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">$683.33</span>\n              <span class=\"text-muted-foreground text-xs font-normal\">/ night</span>\n            </div>\n            <p class=\"text-muted-foreground mt-0.5 text-xs\">Blended across active portfolio</p>\n          </div>\n          <div class=\"border-border/60 border-t pt-2 text-xs\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-muted-foreground\">Weekend surge rate:</span>\n              <span class=\"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 class=\"flex flex-col justify-between shadow-xs\">\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex items-center justify-between gap-2\">\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <div\n                class=\"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 class=\"size-4\" />\n              </div>\n              <CardTitle class=\"text-muted-foreground text-sm font-medium\">RevPAR (Yield / Unit)</CardTitle>\n            </div>\n            <Badge\n              wrap\n              variant=\"outline\"\n              class=\"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 class=\"space-y-3\">\n          <div>\n            <div class=\"flex items-baseline gap-1.5\">\n              <span class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">$604.75</span>\n            </div>\n            <p class=\"text-muted-foreground mt-0.5 text-xs tabular-nums\">Market benchmark: $512.00</p>\n          </div>\n          <div class=\"border-border/60 border-t pt-2 text-xs\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-muted-foreground\">Regional yield index:</span>\n              <span class=\"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 class=\"grid grid-cols-1 gap-6 lg:grid-cols-2\">\n      <!-- Upcoming Payouts Schedule Card -->\n      <Card class=\"flex flex-col justify-between shadow-xs\">\n        <CardHeader>\n          <div class=\"flex items-center justify-between\">\n            <div class=\"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 wrap variant=\"outline\" class=\"border-success/20 bg-success/10 text-success text-xs font-medium\">\n              <CheckCircle2 class=\"mr-1 size-3\" />\n              Auto-Transfer Active\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-4\">\n          <!-- Next Payout Focus Box -->\n          <div class=\"border-border bg-muted/40 rounded-lg border p-4\">\n            <div class=\"flex items-start justify-between gap-4\">\n              <div class=\"flex items-start gap-3\">\n                <div\n                  class=\"border-success/20 bg-success/10 text-success flex size-9 shrink-0 items-center justify-center rounded-lg border\"\n                >\n                  <Landmark class=\"size-4.5\" />\n                </div>\n                <div class=\"space-y-0.5\">\n                  <span class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">Next Payout</span>\n                  <div class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">$4,250.00</div>\n                  <p class=\"text-foreground text-xs font-medium\">\n                    Direct Deposit to Chase •••• 4892 ·\n                    <span class=\"text-success font-semibold\">Arriving Aug 24</span>\n                  </p>\n                </div>\n              </div>\n              <Badge wrap variant=\"secondary\" class=\"text-xs\"> Scheduled </Badge>\n            </div>\n          </div>\n\n          <!-- Completed YTD & Bank Info Row -->\n          <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n            <div class=\"border-border bg-card rounded-lg border p-3.5 shadow-xs\">\n              <span class=\"text-muted-foreground text-xs font-medium\">Completed payouts YTD</span>\n              <div class=\"text-foreground mt-1 text-xl font-bold tracking-tight tabular-nums\">$92,400.00</div>\n              <p class=\"text-muted-foreground mt-0.5 text-xs\">18 completed disbursement cycles</p>\n            </div>\n            <div class=\"border-border bg-card rounded-lg border p-3.5 shadow-xs\">\n              <span class=\"text-muted-foreground text-xs font-medium\">Settlement routing</span>\n              <div class=\"text-foreground mt-1 text-sm font-semibold\">JPMorgan Chase Bank</div>\n              <p class=\"text-muted-foreground mt-0.5 text-xs tabular-nums\">Routing: 021000021 · $0 held</p>\n            </div>\n          </div>\n\n          <div class=\"flex items-center justify-between pt-1\">\n            <p class=\"text-muted-foreground text-xs\">Payouts release automatically 24h after each guest check-in.</p>\n            <Button variant=\"outline\" size=\"sm\" class=\"gap-1.5 text-xs\">\n              <Building2 class=\"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 class=\"flex flex-col justify-between shadow-xs\">\n        <CardHeader>\n          <div class=\"flex items-center justify-between\">\n            <div class=\"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              class=\"border-warning/20 bg-warning/10 text-warning gap-1 text-xs font-semibold\"\n            >\n              <TrendingUp class=\"size-3\" />\n              Smart Rates\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-4\">\n          <!-- Suggestion Banner Box -->\n          <div class=\"border-border/80 bg-muted/30 hover:bg-muted/50 rounded-lg border p-4 transition-colors\">\n            <div class=\"flex items-start gap-3\">\n              <div\n                class=\"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              >\n                <TrendingUp class=\"size-4\" />\n              </div>\n              <div class=\"flex-1 space-y-2\">\n                <div class=\"flex flex-wrap items-center justify-between gap-2\">\n                  <h4 class=\"text-foreground text-sm font-semibold\">\n                    High demand weekend Sep 4-7: increase ADR by +15%\n                  </h4>\n                  <Badge wrap variant=\"outline\" class=\"text-xs font-medium\">Labor Day Peak</Badge>\n                </div>\n                <p class=\"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 class=\"border-border/60 grid grid-cols-1 gap-2 border-t pt-2.5 text-xs sm:grid-cols-3\">\n                  <div>\n                    <span class=\"text-muted-foreground\">Current ADR:</span>\n                    <p class=\"text-foreground font-semibold tabular-nums\">$680.00 / night</p>\n                  </div>\n                  <div>\n                    <span class=\"text-muted-foreground\">Suggested ADR:</span>\n                    <p class=\"text-success text-success font-semibold tabular-nums\">$782.00 (+15%)</p>\n                  </div>\n                  <div class=\"sm:text-right\">\n                    <span class=\"text-muted-foreground\">Est. Extra Rev:</span>\n                    <p class=\"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          <div\n            v-if=\"isPricingApplied\"\n            class=\"border-success/20 bg-success/10 flex items-center justify-between rounded-lg border p-3 text-xs\"\n          >\n            <div class=\"text-success flex flex-wrap items-center gap-2 font-medium\">\n              <CheckCircle2 class=\"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\" class=\"h-7 text-xs\" @click=\"isPricingApplied = false\"> Undo </Button>\n          </div>\n\n          <div v-else class=\"flex flex-wrap items-center justify-between gap-2 pt-1\">\n            <span class=\"text-muted-foreground text-xs\">Algorithm confidence score: 96%</span>\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <Button variant=\"outline\" size=\"sm\" class=\"text-xs\"> Customize Rules </Button>\n              <Button size=\"sm\" class=\"gap-1.5 text-xs\" @click=\"isPricingApplied = true\">\n                <Check class=\"size-3.5\" />\n                <span>Apply Suggested Rate</span>\n              </Button>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- Monthly Revenue Breakdown Table Card -->\n    <Card class=\"shadow-xs\">\n      <CardHeader>\n        <div class=\"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\" class=\"w-fit text-xs font-normal tabular-nums\">\n            4 reservations · August 2026\n          </Badge>\n        </div>\n      </CardHeader>\n      <CardContent class=\"p-0 sm:p-6 sm:pt-0\">\n        <div class=\"overflow-x-auto\">\n          <Table>\n            <TableHeader>\n              <TableRow>\n                <TableHead class=\"min-w-[180px]\">Guest &amp; Reservation</TableHead>\n                <TableHead class=\"min-w-[160px]\">Property Booked</TableHead>\n                <TableHead>Dates Booked</TableHead>\n                <TableHead class=\"text-right\">Nightly Rate</TableHead>\n                <TableHead class=\"text-right\">Cleaning Fee</TableHead>\n                <TableHead class=\"text-right\">Host Fee (3%)</TableHead>\n                <TableHead class=\"text-right\">Net Payout</TableHead>\n                <TableHead class=\"text-right\">Status</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              <TableRow v-for=\"res in reservations\" :key=\"res.id\" class=\"hover:bg-muted/50\">\n                <!-- Guest Column -->\n                <TableCell>\n                  <div class=\"flex items-center gap-3\">\n                    <Avatar size=\"sm\" class=\"shrink-0\">\n                      <AvatarImage :src=\"res.guest.avatar\" :alt=\"res.guest.name\" />\n                      <AvatarFallback class=\"text-xs font-medium\">{{ res.guest.initials }}</AvatarFallback>\n                    </Avatar>\n                    <div class=\"space-y-0.5\">\n                      <div class=\"text-foreground text-sm font-semibold\">{{ res.guest.name }}</div>\n                      <div class=\"text-muted-foreground font-mono text-xs tabular-nums\">{{ res.confirmationCode }}</div>\n                    </div>\n                  </div>\n                </TableCell>\n\n                <!-- Property Booked -->\n                <TableCell>\n                  <div class=\"space-y-0.5\">\n                    <div class=\"text-foreground text-sm font-medium\">{{ res.property }}</div>\n                    <div class=\"text-muted-foreground text-xs\">{{ res.location }}</div>\n                  </div>\n                </TableCell>\n\n                <!-- Dates Booked -->\n                <TableCell>\n                  <div class=\"text-foreground text-xs font-medium tabular-nums\">{{ res.datesBooked }}</div>\n                </TableCell>\n\n                <!-- Nightly Rate -->\n                <TableCell class=\"text-right\">\n                  <div class=\"text-foreground text-xs font-semibold tabular-nums\">{{ res.nightlyRate }}</div>\n                  <div class=\"text-muted-foreground text-xs tabular-nums\">{{ res.nightsCount }} nights</div>\n                </TableCell>\n\n                <!-- Cleaning Fee -->\n                <TableCell class=\"text-muted-foreground text-right text-xs tabular-nums\">\n                  {{ res.cleaningFee }}\n                </TableCell>\n\n                <!-- Host Service Fee -->\n                <TableCell class=\"text-muted-foreground text-right text-xs tabular-nums\">\n                  {{ res.hostServiceFee }}\n                </TableCell>\n\n                <!-- Net Payout -->\n                <TableCell class=\"text-foreground text-right text-sm font-bold tabular-nums\">\n                  {{ res.netPayout }}\n                </TableCell>\n\n                <!-- Status Badge -->\n                <TableCell class=\"text-right\">\n                  <Badge\n                    wrap\n                    variant=\"outline\"\n                    :class=\"\n                      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                    <span v-if=\"res.status === 'paid'\" class=\"flex items-center gap-1\">\n                      <Check class=\"size-3\" />\n                      Paid\n                    </span>\n                    <span v-else-if=\"res.status === 'processing'\" class=\"flex items-center gap-1\">\n                      <Clock class=\"size-3\" />\n                      Processing\n                    </span>\n                  </Badge>\n                </TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/AirbnbHostEarnings.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/avatar.json",
    "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/progress.json",
    "https://uipkge.dev/r/vue/select.json",
    "https://uipkge.dev/r/vue/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"
  ]
}