{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "ad-spend-roi-dashboard", "title": "Ad Spend Roi Dashboard", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/ad-spend-roi-dashboard/ad-spend-roi-dashboard.component.ts", "content": "// Multi-channel paid acquisition ad spend, blended ROAS, and CAC performance\n// dashboard: KPI cards, channel comparison table with live toggles, and top\n// campaigns. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport {\n Award,\n Calendar,\n Download,\n LucideAngularModule,\n Megaphone,\n Plus,\n Search,\n Share2,\n Target,\n TrendingDown,\n TrendingUp,\n Users,\n Wallet,\n Zap,\n type LucideIconData,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiSwitchComponent } from '@/ui/switch/switch.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\nexport type ChannelRoasStatus = 'high' | 'medium' | 'low'\n\nexport interface AdChannelPerformance {\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: ChannelRoasStatus\n conversions: number\n revenue: string\n active: boolean\n icon: LucideIconData\n iconClass: string\n}\n\nexport interface 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 initialChannels: AdChannelPerformance[] = [\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\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\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-ad-spend-roi-dashboard, [ui-ad-spend-roi-dashboard]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiProgressComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiSeparatorComponent,\n UiSwitchComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n \n
\n
\n

Paid Acquisition & Ad Spend ROI

\n

\n Multi-channel paid acquisition ad spend, blended ROAS, and CAC performance dashboard.\n

\n
\n
\n \n \n \n This Month · Aug 2026\n Last Month · Jul 2026\n Last 30 Days\n Last 90 Days (Q3)\n Year to Date · 2026\n \n \n \n \n
\n
\n\n \n
\n
\n
\n
\n
\n \n \n
\n

Total Ad Spend

\n
\n 82.8% pacing\n
\n
\n
\n
\n
\n $24,850.00\n
\n

Monthly budget $30,000.00

\n
\n
\n \n
\n $5,150.00 headroom\n 10 days left\n
\n
\n
\n
\n\n
\n
\n
\n
\n \n \n
\n

Attributed Revenue

\n
\n \n 3.39x Blended ROAS\n \n
\n
\n
\n
\n
\n $84,200.00\n
\n

Direct ad touch attribution

\n
\n
\n
\n Period growth:\n +$18,450.00 (+28.1%)\n
\n

Target ROAS: 2.80x (exceeded)

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

Customer Acquisition Cost

\n
\n \n \n -$6.20 vs last month\n \n
\n
\n
\n
\n
\n $48.50\n / customer\n
\n

Blended across all 4 channels

\n
\n
\n
\n Target CAC ceiling:\n $55.00 max\n
\n

11.8% below budget cap

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

Total Conversions

\n
\n +64 vs Jul\n
\n
\n
\n
\n
\n 512\n Paid Customers\n
\n

Avg order value $164.45

\n
\n
\n
\n Blended Conversion Rate:\n 14.2%\n
\n

Organic lift multiplier: 1.18x

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

Channel Performance Comparison

\n

\n Unit economics, click-through rates, acquisition volumes, and return on ad spend across channels.\n

\n
\n \n 4 channels active\n \n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n @for (channel of channels(); track channel.id) {\n \n \n \n \n \n \n \n \n \n }\n \n
Channel & CampaignsSpendImpressions & Clicks (CTR)CPC & CPAROASConversions & RevStatus
\n
\n
\n \n
\n
\n
{{ channel.name }}
\n
\n {{ channel.campaignCount }} active campaigns\n
\n
\n
\n 		\n
{{ channel.spend }}
\n
{{ spendShare(channel) }}% of total
\n 		\n
{{ channel.impressions }} imp
\n
\n {{ channel.clicks }} clicks ({{ channel.ctr }})\n
\n 		\n
{{ channel.cpc }} CPC
\n
{{ channel.cpa }} CPA
\n 		\n \n {{ channel.roas }} ROAS\n \n \n
{{ channel.revenue }}
\n
\n {{ channel.conversions }} conversions\n
\n 		\n
\n \n {{ channel.active ? 'Active' : 'Paused' }}\n \n \n
\n
\n
\n
\n
\n\n \n
\n
\n
\n
\n

Top Performing Campaigns

\n \n \n Highest ROAS\n \n
\n

Ad creatives and targeting sets driving highest attribution revenue and ROAS.

\n
\n
\n @for (campaign of topCampaigns; track campaign.id) {\n \n
\n
\n \n #{{ campaign.rank }}\n \n
\n

{{ campaign.name }}

\n
\n {{ campaign.channel }}\n {{ campaign.targetNiche }}\n
\n
\n
\n \n {{ campaign.roas }} ROAS\n \n
\n\n
\n
\n Spend:\n

{{ campaign.spend }}

\n
\n
\n Attributed Rev:\n

{{ campaign.revenue }}

\n
\n
\n Unit CPA:\n

{{ campaign.cpa }}

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

Budget Allocation & Guardrails

\n Automated Pacing\n
\n

\n Live capital distribution by ad channel with automated spend-shift recommendations.\n

\n
\n
\n \n
\n

Total Deployed Spend

\n

$24,850.00

\n
\n
\n \n Budget Cap: $30,000.00\n \n

$5,150.00 (17.2%) remaining

\n
\n
\n\n
\n
\n
\n Google Search Ads (45.1%)\n $11,200.00 / 4.2x ROAS\n
\n \n
\n\n
\n
\n Meta / Instagram Ads (30.8%)\n $7,650.00 / 3.1x ROAS\n
\n \n
\n\n
\n
\n LinkedIn Sponsored (15.3%)\n $3,800.00 / 2.4x ROAS\n
\n \n
\n\n
\n
\n Twitter / X Ads (8.8%)\n $2,200.00 / 1.8x ROAS\n
\n \n
\n
\n\n \n\n
\n \n
\n
Growth Optimization Insight
\n

\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

\n
\n
\n
\n \n \n \n `,\n})\nexport class UiAdSpendRoiDashboardComponent {\n protected readonly Award = Award\n protected readonly Calendar = Calendar\n protected readonly Download = Download\n protected readonly Plus = Plus\n protected readonly Target = Target\n protected readonly TrendingDown = TrendingDown\n protected readonly TrendingUp = TrendingUp\n protected readonly Users = Users\n protected readonly Wallet = Wallet\n\n protected readonly topCampaigns = topCampaigns\n\n @Input() set initialPeriod(v: string | undefined) {\n this.selectedPeriod.set(v ?? 'this-month')\n }\n @Input('class') className?: string\n\n readonly selectedPeriod = signal('this-month')\n readonly channels = signal(initialChannels.map((c) => ({ ...c })))\n\n get rootClass(): string {\n return cn('mx-auto w-full max-w-6xl space-y-6', this.className)\n }\n\n channelIconClass(channel: AdChannelPerformance): string {\n return cn('flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs', channel.iconClass)\n }\n\n spendShare(channel: AdChannelPerformance): string {\n const spendNum = parseFloat(channel.spend.replace(/[$,]/g, ''))\n return ((spendNum / 24850) * 100).toFixed(1)\n }\n\n roasBadgeClass(channel: AdChannelPerformance): string {\n return 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 handleToggleChannel(id: string, active: boolean): void {\n this.channels.update((prev) => prev.map((ch) => (ch.id === id ? { ...ch, active } : ch)))\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/ad-spend-roi-dashboard/ad-spend-roi-dashboard.component.ts" }, { "path": "packages/registry-angular/blocks/ad-spend-roi-dashboard/index.ts", "content": "export {\n UiAdSpendRoiDashboardComponent,\n type AdChannelPerformance,\n type ChannelRoasStatus,\n type TopCampaign,\n} from './ad-spend-roi-dashboard.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/ad-spend-roi-dashboard/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/switch.json", "https://uipkge.dev/r/angular/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" ] }