{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "ad-spend-roi-dashboard",
  "title": "Ad Spend Roi Dashboard",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/ad-spend-roi-dashboard/AdSpendRoiDashboard.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref, type HTMLAttributes } from 'vue'\nimport {\n  Award,\n  Calendar,\n  Download,\n  Megaphone,\n  Plus,\n  Search,\n  Share2,\n  Target,\n  TrendingDown,\n  TrendingUp,\n  Users,\n  Wallet,\n  Zap,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 { Separator } from '@/components/ui/separator'\nimport { Switch } from '@/components/ui/switch'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst selectedPeriod = ref('this-month')\n\ninterface ChannelPerformance {\n  id: string\n  name: string\n  campaignCount: number\n  spend: string\n  impressions: string\n  clicks: string\n  ctr: string\n  cpc: string\n  cpa: string\n  roas: string\n  roasStatus: 'high' | 'medium' | 'low'\n  conversions: number\n  revenue: string\n  active: boolean\n  icon: any\n  iconClass: string\n}\n\nconst channels = ref<ChannelPerformance[]>([\n  {\n    id: 'google-search',\n    name: 'Google Search Ads',\n    campaignCount: 6,\n    spend: '$11,200.00',\n    impressions: '248,500',\n    clicks: '14,910',\n    ctr: '6.00%',\n    cpc: '$0.75',\n    cpa: '$42.10',\n    roas: '4.2x',\n    roasStatus: 'high',\n    conversions: 266,\n    revenue: '$47,040.00',\n    active: true,\n    icon: Search,\n    iconClass: 'bg-info/10 text-info border-info/20',\n  },\n  {\n    id: 'meta-ads',\n    name: 'Meta / Instagram Ads',\n    campaignCount: 8,\n    spend: '$7,650.00',\n    impressions: '420,000',\n    clicks: '8,400',\n    ctr: '2.00%',\n    cpc: '$0.91',\n    cpa: '$49.35',\n    roas: '3.1x',\n    roasStatus: 'high',\n    conversions: 155,\n    revenue: '$23,715.00',\n    active: true,\n    icon: Share2,\n    iconClass: 'bg-chart-1/10 text-chart-1 border-chart-1/20',\n  },\n  {\n    id: 'linkedin-ads',\n    name: 'LinkedIn Sponsored',\n    campaignCount: 3,\n    spend: '$3,800.00',\n    impressions: '54,000',\n    clicks: '1,080',\n    ctr: '2.00%',\n    cpc: '$3.52',\n    cpa: '$64.40',\n    roas: '2.4x',\n    roasStatus: 'medium',\n    conversions: 59,\n    revenue: '$9,120.00',\n    active: true,\n    icon: Megaphone,\n    iconClass: 'bg-info/10 text-info border-info/20',\n  },\n  {\n    id: 'twitter-ads',\n    name: 'Twitter / X Ads',\n    campaignCount: 2,\n    spend: '$2,200.00',\n    impressions: '110,000',\n    clicks: '1,650',\n    ctr: '1.50%',\n    cpc: '$1.33',\n    cpa: '$68.75',\n    roas: '1.8x',\n    roasStatus: 'low',\n    conversions: 32,\n    revenue: '$3,960.00',\n    active: false,\n    icon: Zap,\n    iconClass: 'bg-zinc-500/10 text-zinc-600 text-muted-foreground border-zinc-500/20',\n  },\n])\n\ninterface TopCampaign {\n  id: string\n  rank: number\n  name: string\n  channel: string\n  targetNiche: string\n  spend: string\n  revenue: string\n  cpa: string\n  roas: string\n}\n\nconst topCampaigns: TopCampaign[] = [\n  {\n    id: 'camp-1',\n    rank: 1,\n    name: 'Q3 Retargeting · High-Intent Abandoned Cart',\n    channel: 'Google Search Ads',\n    targetNiche: 'SaaS Mid-Market Decision Makers',\n    spend: '$4,120.00',\n    revenue: '$22,248.00',\n    cpa: '$34.33',\n    roas: '5.4x',\n  },\n  {\n    id: 'camp-2',\n    rank: 2,\n    name: 'Competitor Keyword Conquesting - Core US',\n    channel: 'Google Search Ads',\n    targetNiche: 'Direct B2B Search Intent',\n    spend: '$6,800.00',\n    revenue: '$31,280.00',\n    cpa: '$38.20',\n    roas: '4.6x',\n  },\n  {\n    id: 'camp-3',\n    rank: 3,\n    name: 'Founder Video Testimonial - Lookalike 1%',\n    channel: 'Meta / Instagram Ads',\n    targetNiche: 'Seed & Series A Tech Founders',\n    spend: '$3,450.00',\n    revenue: '$13,110.00',\n    cpa: '$46.00',\n    roas: '3.8x',\n  },\n]\n</script>\n\n<template>\n  <div data-slot=\"ad-spend-roi-dashboard\" :class=\"cn('mx-auto w-full max-w-6xl space-y-6', props.class)\">\n    <!-- Header -->\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\">Paid Acquisition & Ad Spend ROI</h1>\n        <p class=\"text-muted-foreground text-sm\">\n          Multi-channel paid acquisition ad spend, blended ROAS, and CAC performance dashboard.\n        </p>\n      </div>\n      <div class=\"flex flex-wrap items-center gap-2.5\">\n        <Select v-model=\"selectedPeriod\">\n          <SelectTrigger class=\"w-56 text-xs\" aria-label=\"Select date range\">\n            <Calendar class=\"text-muted-foreground mr-1.5 size-3.5\" />\n            <SelectValue placeholder=\"Select period\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"this-month\">This Month · Aug 2026</SelectItem>\n            <SelectItem value=\"last-month\">Last Month · Jul 2026</SelectItem>\n            <SelectItem value=\"last-30\">Last 30 Days</SelectItem>\n            <SelectItem value=\"last-90\">Last 90 Days (Q3)</SelectItem>\n            <SelectItem value=\"ytd\">Year to Date · 2026</SelectItem>\n          </SelectContent>\n        </Select>\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 Campaign CSV</span>\n        </Button>\n        <Button size=\"sm\" class=\"gap-1.5 text-xs\">\n          <Plus class=\"size-3.5\" />\n          <span>Connect Ad Account</span>\n        </Button>\n      </div>\n    </div>\n\n    <!-- 4 Primary Performance KPI Cards -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <!-- Total Ad Spend -->\n      <Card class=\"flex flex-col justify-between shadow-xs\">\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex flex-wrap items-center justify-between gap-2\">\n            <div class=\"flex min-w-0 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                <Wallet class=\"size-4\" />\n              </div>\n              <CardTitle class=\"text-muted-foreground text-sm font-medium\">Total Ad Spend</CardTitle>\n            </div>\n            <Badge wrap variant=\"outline\" class=\"text-xs font-normal tabular-nums\">82.8% pacing</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\">$24,850.00</span>\n            </div>\n            <p class=\"text-muted-foreground mt-0.5 text-xs tabular-nums\">Monthly budget $30,000.00</p>\n          </div>\n          <div class=\"space-y-1.5\">\n            <Progress :model-value=\"82.8\" class=\"[&_[data-slot=progress-indicator]]:bg-primary h-1.5\" />\n            <div class=\"text-muted-foreground flex items-center justify-between text-xs tabular-nums\">\n              <span>$5,150.00 headroom</span>\n              <span>10 days left</span>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Attributed Revenue -->\n      <Card class=\"flex flex-col justify-between shadow-xs\">\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex flex-wrap items-center justify-between gap-2\">\n            <div class=\"flex min-w-0 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                <TrendingUp class=\"size-4\" />\n              </div>\n              <CardTitle class=\"text-muted-foreground text-sm font-medium\">Attributed Revenue</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              3.39x Blended ROAS\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\">$84,200.00</span>\n            </div>\n            <p class=\"text-muted-foreground mt-0.5 text-xs\">Direct ad touch attribution</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\">Period growth:</span>\n              <span class=\"text-success text-success font-semibold tabular-nums\">+$18,450.00 (+28.1%)</span>\n            </div>\n            <p class=\"text-muted-foreground mt-0.5 text-xs\">Target ROAS: 2.80x (exceeded)</p>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Customer Acquisition Cost (CAC) -->\n      <Card class=\"flex flex-col justify-between shadow-xs\">\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex flex-wrap items-center justify-between gap-2\">\n            <div class=\"flex min-w-0 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                <Target class=\"size-4\" />\n              </div>\n              <CardTitle class=\"text-muted-foreground text-sm font-medium\">Customer Acquisition Cost</CardTitle>\n            </div>\n            <Badge\n              wrap\n              variant=\"outline\"\n              class=\"border-success/20 bg-success/10 text-success text-success gap-1 text-xs font-medium tabular-nums\"\n            >\n              <TrendingDown class=\"size-3\" />\n              <span>-$6.20 vs last month</span>\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\">$48.50</span>\n              <span class=\"text-muted-foreground text-xs\">/ customer</span>\n            </div>\n            <p class=\"text-muted-foreground mt-0.5 text-xs\">Blended across all 4 channels</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\">Target CAC ceiling:</span>\n              <span class=\"text-foreground font-semibold tabular-nums\">$55.00 max</span>\n            </div>\n            <p class=\"text-success mt-0.5 text-xs font-medium\">11.8% below budget cap</p>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Total Conversions -->\n      <Card class=\"flex flex-col justify-between shadow-xs\">\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex flex-wrap items-center justify-between gap-2\">\n            <div class=\"flex min-w-0 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                <Users class=\"size-4\" />\n              </div>\n              <CardTitle class=\"text-muted-foreground text-sm font-medium\">Total Conversions</CardTitle>\n            </div>\n            <Badge wrap variant=\"outline\" class=\"text-xs font-normal tabular-nums\">+64 vs Jul</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\">512</span>\n              <span class=\"text-foreground text-sm font-semibold\">Paid Customers</span>\n            </div>\n            <p class=\"text-muted-foreground mt-0.5 text-xs tabular-nums\">Avg order value $164.45</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\">Blended Conversion Rate:</span>\n              <span class=\"text-foreground font-semibold tabular-nums\">14.2%</span>\n            </div>\n            <p class=\"text-muted-foreground mt-0.5 text-xs\">Organic lift multiplier: 1.18x</p>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- Channel Performance Comparison Table -->\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>Channel Performance Comparison</CardTitle>\n            <CardDescription>\n              Unit economics, click-through rates, acquisition volumes, and return on ad spend across channels.\n            </CardDescription>\n          </div>\n          <Badge wrap variant=\"outline\" class=\"w-fit text-xs font-normal tabular-nums\">4 channels active</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-[200px]\">Channel & Campaigns</TableHead>\n                <TableHead class=\"text-right\">Spend</TableHead>\n                <TableHead class=\"text-right\">Impressions & Clicks (CTR)</TableHead>\n                <TableHead class=\"text-right\">CPC & CPA</TableHead>\n                <TableHead class=\"text-right\">ROAS</TableHead>\n                <TableHead class=\"text-right\">Conversions & Rev</TableHead>\n                <TableHead class=\"text-right\">Status</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              <TableRow v-for=\"channel in channels\" :key=\"channel.id\" class=\"hover:bg-muted/50\">\n                <TableCell>\n                  <div class=\"flex items-center gap-3\">\n                    <div\n                      :class=\"\n                        cn(\n                          'flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs',\n                          channel.iconClass,\n                        )\n                      \"\n                      aria-hidden=\"true\"\n                    >\n                      <component :is=\"channel.icon\" class=\"size-4\" />\n                    </div>\n                    <div>\n                      <div class=\"text-foreground text-sm font-semibold\">{{ channel.name }}</div>\n                      <div class=\"text-muted-foreground text-xs tabular-nums\">\n                        {{ channel.campaignCount }} active campaigns\n                      </div>\n                    </div>\n                  </div>\n                </TableCell>\n                <TableCell class=\"text-right\">\n                  <div class=\"text-foreground text-sm font-semibold tabular-nums\">{{ channel.spend }}</div>\n                  <div class=\"text-muted-foreground text-xs tabular-nums\">\n                    {{ ((parseFloat(channel.spend.replace(/[$,]/g, '')) / 24850) * 100).toFixed(1) }}% of total\n                  </div>\n                </TableCell>\n                <TableCell class=\"text-right\">\n                  <div class=\"text-foreground text-xs font-medium tabular-nums\">{{ channel.impressions }} imp</div>\n                  <div class=\"text-muted-foreground text-xs tabular-nums\">\n                    {{ channel.clicks }} clicks ({{ channel.ctr }})\n                  </div>\n                </TableCell>\n                <TableCell class=\"text-right\">\n                  <div class=\"text-foreground text-xs font-semibold tabular-nums\">{{ channel.cpc }} CPC</div>\n                  <div class=\"text-muted-foreground text-xs tabular-nums\">{{ channel.cpa }} CPA</div>\n                </TableCell>\n                <TableCell class=\"text-right\">\n                  <Badge\n                    wrap\n                    variant=\"outline\"\n                    :class=\"\n                      cn(\n                        'text-xs font-bold tabular-nums',\n                        channel.roasStatus === 'high' && 'border-success/20 bg-success/10 text-success',\n                        channel.roasStatus === 'medium' && 'border-info/20 bg-info/10 text-info',\n                        channel.roasStatus === 'low' && 'border-warning/20 bg-warning/10 text-warning',\n                      )\n                    \"\n                  >\n                    {{ channel.roas }} ROAS\n                  </Badge>\n                </TableCell>\n                <TableCell class=\"text-right\">\n                  <div class=\"text-foreground text-xs font-bold tabular-nums\">{{ channel.revenue }}</div>\n                  <div class=\"text-muted-foreground text-xs tabular-nums\">{{ channel.conversions }} conversions</div>\n                </TableCell>\n                <TableCell class=\"text-right\">\n                  <div class=\"flex items-center justify-end gap-2\">\n                    <span class=\"text-muted-foreground text-xs font-medium\">\n                      {{ channel.active ? 'Active' : 'Paused' }}\n                    </span>\n                    <Switch v-model=\"channel.active\" :aria-label=\"'Toggle status for ' + channel.name\" />\n                  </div>\n                </TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Bottom Section: Top Performing Campaigns & Budget Allocation -->\n    <div class=\"grid grid-cols-1 gap-6 lg:grid-cols-2\">\n      <!-- Top Performing Campaigns Breakdown Card -->\n      <Card class=\"shadow-xs\">\n        <CardHeader>\n          <div class=\"flex items-center justify-between\">\n            <CardTitle>Top Performing Campaigns</CardTitle>\n            <Badge wrap variant=\"outline\" class=\"gap-1 text-xs\">\n              <Award class=\"text-warning size-3\" />\n              <span>Highest ROAS</span>\n            </Badge>\n          </div>\n          <CardDescription>\n            Ad creatives and targeting sets driving highest attribution revenue and ROAS.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-4\">\n          <div\n            v-for=\"campaign in topCampaigns\"\n            :key=\"campaign.id\"\n            class=\"border-border bg-muted/30 hover:bg-muted/60 flex flex-col gap-3 rounded-lg border p-4 transition-colors\"\n          >\n            <div class=\"flex items-start justify-between gap-2\">\n              <div class=\"flex items-start gap-2.5\">\n                <Badge\n                  :variant=\"campaign.rank === 1 ? 'default' : 'secondary'\"\n                  class=\"flex size-6 shrink-0 items-center justify-center rounded-full p-0 text-xs font-bold whitespace-normal tabular-nums\"\n                >\n                  #{{ campaign.rank }}\n                </Badge>\n                <div class=\"space-y-0.5\">\n                  <h4 class=\"text-foreground text-sm font-semibold\">{{ campaign.name }}</h4>\n                  <div class=\"flex flex-wrap items-center gap-1.5\">\n                    <Badge wrap variant=\"outline\" class=\"text-xs font-normal\">\n                      {{ campaign.channel }}\n                    </Badge>\n                    <span class=\"text-muted-foreground text-xs\">{{ campaign.targetNiche }}</span>\n                  </div>\n                </div>\n              </div>\n              <Badge\n                wrap\n                variant=\"outline\"\n                class=\"border-success/20 bg-success/10 text-success text-success shrink-0 text-xs font-bold tabular-nums\"\n              >\n                {{ campaign.roas }} ROAS\n              </Badge>\n            </div>\n\n            <div class=\"border-border/60 grid grid-cols-1 gap-2 border-t pt-2 text-xs sm:grid-cols-3\">\n              <div>\n                <span class=\"text-muted-foreground\">Spend:</span>\n                <p class=\"text-foreground font-semibold tabular-nums\">{{ campaign.spend }}</p>\n              </div>\n              <div>\n                <span class=\"text-muted-foreground\">Attributed Rev:</span>\n                <p class=\"text-success text-success font-semibold tabular-nums\">{{ campaign.revenue }}</p>\n              </div>\n              <div class=\"sm:text-right\">\n                <span class=\"text-muted-foreground\">Unit CPA:</span>\n                <p class=\"text-foreground font-semibold tabular-nums\">{{ campaign.cpa }}</p>\n              </div>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Budget Allocation & Channel Efficiency Card -->\n      <Card class=\"shadow-xs\">\n        <CardHeader>\n          <div class=\"flex items-center justify-between\">\n            <CardTitle>Budget Allocation & Guardrails</CardTitle>\n            <Badge wrap variant=\"outline\" class=\"text-xs font-normal\">Automated Pacing</Badge>\n          </div>\n          <CardDescription>\n            Live capital distribution by ad channel with automated spend-shift recommendations.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-4\">\n          <!-- Spend pacing summary box -->\n          <div\n            class=\"border-border bg-muted/40 flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5 rounded-lg border p-4\"\n          >\n            <div>\n              <p class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">Total Deployed Spend</p>\n              <p class=\"text-foreground text-3xl font-bold tracking-tight tabular-nums\">$24,850.00</p>\n            </div>\n            <div class=\"text-right\">\n              <span class=\"text-muted-foreground text-xs\">\n                Budget Cap: <strong class=\"text-foreground font-semibold tabular-nums\">$30,000.00</strong>\n              </span>\n              <p class=\"text-success text-success text-xs font-semibold tabular-nums\">$5,150.00 (17.2%) remaining</p>\n            </div>\n          </div>\n\n          <!-- Channel Share Progress Bars -->\n          <div class=\"space-y-3 text-xs\">\n            <div class=\"space-y-1\">\n              <div class=\"flex items-center justify-between\">\n                <span class=\"text-foreground font-medium\">Google Search Ads (45.1%)</span>\n                <span class=\"text-foreground font-semibold tabular-nums\">$11,200.00 / 4.2x ROAS</span>\n              </div>\n              <Progress :model-value=\"45.1\" class=\"[&_[data-slot=progress-indicator]]:bg-info h-1.5\" />\n            </div>\n\n            <div class=\"space-y-1\">\n              <div class=\"flex items-center justify-between\">\n                <span class=\"text-foreground font-medium\">Meta / Instagram Ads (30.8%)</span>\n                <span class=\"text-foreground font-semibold tabular-nums\">$7,650.00 / 3.1x ROAS</span>\n              </div>\n              <Progress :model-value=\"30.8\" class=\"[&_[data-slot=progress-indicator]]:bg-chart-1 h-1.5\" />\n            </div>\n\n            <div class=\"space-y-1\">\n              <div class=\"flex items-center justify-between\">\n                <span class=\"text-foreground font-medium\">LinkedIn Sponsored (15.3%)</span>\n                <span class=\"text-foreground font-semibold tabular-nums\">$3,800.00 / 2.4x ROAS</span>\n              </div>\n              <Progress :model-value=\"15.3\" class=\"[&_[data-slot=progress-indicator]]:bg-info h-1.5\" />\n            </div>\n\n            <div class=\"space-y-1\">\n              <div class=\"flex items-center justify-between\">\n                <span class=\"text-foreground font-medium\">Twitter / X Ads (8.8%)</span>\n                <span class=\"text-muted-foreground font-semibold tabular-nums\">$2,200.00 / 1.8x ROAS</span>\n              </div>\n              <Progress :model-value=\"8.8\" class=\"h-1.5 [&_[data-slot=progress-indicator]]:bg-zinc-500\" />\n            </div>\n          </div>\n\n          <Separator />\n\n          <!-- Growth Strategy Note -->\n          <div class=\"border-border/80 bg-muted/20 flex items-start gap-3 rounded-lg border p-3\">\n            <TrendingUp class=\"text-primary mt-0.5 size-4 shrink-0\" />\n            <div class=\"space-y-1\">\n              <h5 class=\"text-foreground text-xs font-semibold\">Growth Optimization Insight</h5>\n              <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                Google Search & Meta campaigns are outperforming blended ROAS target (+0.59x). Pausing Twitter / X Ads\n                saves $73.30/day to reallocate into the highest-converting Q3 Retargeting set.\n              </p>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/AdSpendRoiDashboard.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "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/separator.json",
    "https://uipkge.dev/r/vue/switch.json",
    "https://uipkge.dev/r/vue/table.json"
  ],
  "description": "Multi-channel paid acquisition ad spend, blended ROAS, and CAC performance dashboard: 4 primary KPI cards (total spend, revenue with blended ROAS, CAC, conversions), channel performance comparison table with live toggle switches, and top 3 performing campaign breakdown.",
  "categories": [
    "marketing",
    "dashboard",
    "analytics"
  ]
}