{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "ad-spend-roi-dashboard", "title": "Ad Spend Roi Dashboard", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/ad-spend-roi-dashboard/AdSpendRoiDashboard.tsx", "content": "'use client'\n\nimport * as React from 'react'\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-react'\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\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: React.ComponentType<{ className?: string }>\n iconClass: string\n}\n\nconst initialChannels: 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\nexport function AdSpendRoiDashboard({ className }: { className?: string }) {\n const [selectedPeriod, setSelectedPeriod] = React.useState('this-month')\n const [channels, setChannels] = React.useState(initialChannels)\n\n const handleToggleChannel = (id: string, active: boolean) => {\n setChannels((prev) => prev.map((ch) => (ch.id === id ? { ...ch, active } : ch)))\n }\n\n return (\n
\n {/* Header */}\n
\n
\n

\n Paid Acquisition & Ad Spend ROI\n

\n

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

\n
\n
\n \n \n \n
\n
\n\n {/* 4 Primary Performance KPI Cards */}\n
\n {/* Total Ad Spend */}\n \n \n
\n
\n \n \n
\n Total Ad Spend\n
\n \n 82.8% pacing\n \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 {/* Attributed Revenue */}\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 {/* Customer Acquisition Cost (CAC) */}\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 {/* Total Conversions */}\n \n \n
\n
\n \n \n
\n Total Conversions\n
\n \n +64 vs Jul\n \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 {/* Channel Performance Comparison Table */}\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 Channel & Campaigns\n Spend\n Impressions & Clicks (CTR)\n CPC & CPA\n ROAS\n Conversions & Rev\n Status\n \n \n \n {channels.map((channel) => {\n const Icon = channel.icon\n const spendNum = parseFloat(channel.spend.replace(/[$,]/g, ''))\n const pct = ((spendNum / 24850) * 100).toFixed(1)\n return (\n \n \n
\n \n \n
\n
\n
{channel.name}
\n
\n {channel.campaignCount} active campaigns\n
\n
\n \n \n \n
{channel.spend}
\n
{pct}% of total
\n \n \n
\n {channel.impressions} imp\n
\n
\n {channel.clicks} clicks ({channel.ctr})\n
\n \n \n
{channel.cpc} CPC
\n
{channel.cpa} CPA
\n \n \n \n {channel.roas} ROAS\n \n \n \n
{channel.revenue}
\n
\n {channel.conversions} conversions\n
\n \n \n
\n \n {channel.active ? 'Active' : 'Paused'}\n \n handleToggleChannel(channel.id, checked)}\n aria-label={`Toggle status for ${channel.name}`}\n />\n
\n \n \n )\n })}\n \n
\n
\n \n \n\n {/* Bottom Section: Top Performing Campaigns & Budget Allocation */}\n
\n {/* Top Performing Campaigns Breakdown Card */}\n \n \n
\n Top Performing Campaigns\n \n \n Highest ROAS\n \n
\n \n Ad creatives and targeting sets driving highest attribution revenue and ROAS.\n \n \n \n {topCampaigns.map((campaign) => (\n \n
\n
\n \n #{campaign.rank}\n \n
\n

{campaign.name}

\n
\n \n {campaign.channel}\n \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 {/* Budget Allocation & Channel Efficiency Card */}\n \n \n
\n Budget Allocation & Guardrails\n \n Automated Pacing\n \n
\n \n Live capital distribution by ad channel with automated spend-shift recommendations.\n \n \n \n {/* Spend pacing summary box */}\n
\n
\n

\n Total Deployed Spend\n

\n

$24,850.00

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

\n $5,150.00 (17.2%) remaining\n

\n
\n
\n\n {/* Channel Share Progress Bars */}\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 {/* Growth Strategy Note */}\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}\n\nexport default AdSpendRoiDashboard\n", "type": "registry:block", "target": "~/components/blocks/AdSpendRoiDashboard.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "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/separator.json", "https://uipkge.dev/r/react/switch.json", "https://uipkge.dev/r/react/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" ] }