{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dashboard-ads", "title": "Modern Ads Dashboard", "description": "", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "registry/default/blocks/Dashboard/dashboard-ads.tsx", "content": "\"use client\";\n\nimport React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\nimport {\n Globe,\n Clock,\n AlertTriangle,\n RotateCw,\n Cpu,\n Timer,\n Home,\n Compass,\n Megaphone,\n Layers,\n Users,\n BarChart3,\n Settings,\n LogOut,\n Infinity as InfinityIcon,\n Music2,\n LayoutDashboard,\n Calendar,\n Folder,\n PieChart,\n Lightbulb,\n SlidersHorizontal,\n ArrowDownUp,\n Flag,\n Square,\n ChevronDown,\n Bell,\n Plus,\n Search,\n Command,\n MoreVertical,\n Info,\n PanelLeftClose,\n Check,\n TrendingUp,\n TrendingDown,\n} from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\n/* ------------------------------------------------------------------ */\n/* Types */\n/* ------------------------------------------------------------------ */\n\ntype IconType = React.ComponentType<{ className?: string }>;\n\ntype SidebarKey = \"overview\" | \"discover\" | \"campaigns\" | \"adsets\" | \"audience\" | \"reports\" | \"google\" | \"meta\" | \"tiktok\" | \"linkedin\" | \"settings\";\n\ntype TopTabKey = \"dashboard\" | \"planner\" | \"assethub\" | \"segments\" | \"insights\" | \"preferences\";\n\ntype CampaignStatus = \"ACTIVE\" | \"PAUSED\" | \"CANCEL\" | \"COMPLETED\";\n\ntype Campaign = {\n id: string;\n name: string;\n status: CampaignStatus;\n budget: number;\n spent: number;\n conversions: number | null;\n convRate: number | null;\n roas: number | null;\n clicks: number | null;\n ctr: number | null;\n};\n\ntype SortKey = \"name\" | \"status\" | \"budget\" | \"spent\" | \"conversions\" | \"convRate\" | \"roas\" | \"clicks\" | \"ctr\";\n\n/* ------------------------------------------------------------------ */\n/* Static data */\n/* ------------------------------------------------------------------ */\n\nconst months = [\"JAN\", \"FEB\", \"MAR\", \"APR\", \"MAY\", \"JUN\", \"JUL\", \"AUG\", \"SEP\", \"OCT\", \"NOV\", \"DEC\"];\n\nconst generalNav: { key: SidebarKey; label: string; icon: IconType; badge?: number }[] = [\n { key: \"overview\", label: \"Overview\", icon: Home },\n { key: \"discover\", label: \"Discover\", icon: Compass },\n { key: \"campaigns\", label: \"Campaigns\", icon: Megaphone },\n { key: \"adsets\", label: \"Ad Sets\", icon: Layers, badge: 12 },\n { key: \"audience\", label: \"Audience\", icon: Users },\n { key: \"reports\", label: \"Reports\", icon: BarChart3, badge: 32 },\n];\n\nconst accountNav: { key: SidebarKey; label: string; platform: \"google\" | \"meta\" | \"tiktok\" | \"linkedin\" }[] = [\n { key: \"google\", label: \"Google Ads\", platform: \"google\" },\n { key: \"meta\", label: \"Meta Ads\", platform: \"meta\" },\n { key: \"tiktok\", label: \"TikTok Ads\", platform: \"tiktok\" },\n { key: \"linkedin\", label: \"LinkedIn Ads\", platform: \"linkedin\" },\n];\n\nconst topTabs: { key: TopTabKey; label: string; icon: IconType }[] = [\n { key: \"dashboard\", label: \"Dashboard\", icon: LayoutDashboard },\n { key: \"planner\", label: \"Planner\", icon: Calendar },\n { key: \"assethub\", label: \"Asset Hub\", icon: Folder },\n { key: \"segments\", label: \"Segments\", icon: PieChart },\n { key: \"insights\", label: \"Insights\", icon: Lightbulb },\n { key: \"preferences\", label: \"Preferences\", icon: SlidersHorizontal },\n];\n\nconst sectionCopy: Partial> = {\n discover: { icon: Compass, title: \"Discover\", description: \"Trending creatives and benchmarks across your industry will show up here.\" },\n campaigns: { icon: Megaphone, title: \"Campaigns\", description: \"Create and manage every campaign across your connected ad accounts.\" },\n adsets: { icon: Layers, title: \"Ad Sets\", description: \"Group your ads into sets with shared budget and targeting.\" },\n audience: { icon: Users, title: \"Audience\", description: \"Build and save audience segments to target across platforms.\" },\n reports: { icon: BarChart3, title: \"Reports\", description: \"Schedule and export custom performance reports.\" },\n google: { icon: Globe, title: \"Google Ads\", description: \"Connect your Google Ads account to pull performance data in.\" },\n meta: { icon: InfinityIcon, title: \"Meta Ads\", description: \"Connect Meta Ads to sync Facebook and Instagram campaigns.\" },\n tiktok: { icon: Music2, title: \"TikTok Ads\", description: \"Connect TikTok Ads to manage spend alongside your other channels.\" },\n linkedin: { icon: Users, title: \"LinkedIn Ads\", description: \"Connect LinkedIn Ads to track B2B campaign performance.\" },\n settings: { icon: Settings, title: \"Settings\", description: \"Manage workspace, billing and team preferences.\" },\n};\n\nconst topTabCopy: Partial> = {\n planner: { icon: Calendar, title: \"Planner\", description: \"Plan upcoming campaigns and launches on a shared calendar.\" },\n assethub: { icon: Folder, title: \"Asset Hub\", description: \"Store and organize creatives shared across every campaign.\" },\n segments: { icon: PieChart, title: \"Segments\", description: \"Slice performance data by audience segment.\" },\n insights: { icon: Lightbulb, title: \"Insights\", description: \"AI-generated recommendations based on recent performance.\" },\n preferences: { icon: SlidersHorizontal, title: \"Preferences\", description: \"Configure default currency, timezone and reporting cadence.\" },\n};\n\nconst stats: { icon: IconType; label: string; value: string; unit?: string; delta: string; direction: \"up\" | \"down\"; info: string }[] = [\n { icon: Globe, label: \"Requests\", value: \"94\", delta: \"12.4%\", direction: \"up\", info: \"Total API requests processed in the selected period.\" },\n { icon: Clock, label: \"Wall Time\", value: \"0.01\", unit: \"ms\", delta: \"20.4%\", direction: \"up\", info: \"Average wall-clock duration per request.\" },\n { icon: AlertTriangle, label: \"Errors\", value: \"2\", delta: \"56.4%\", direction: \"down\", info: \"Requests that returned a 4xx or 5xx response.\" },\n { icon: RotateCw, label: \"Processing Time\", value: \"0\", unit: \"GB/s\", delta: \"1.7%\", direction: \"up\", info: \"Average data throughput per request.\" },\n { icon: Cpu, label: \"CPU Time\", value: \"0.08\", unit: \"ms\", delta: \"13.1%\", direction: \"down\", info: \"Average CPU time consumed per request.\" },\n { icon: Timer, label: \"Request Time\", value: \"0.02\", unit: \"ms\", delta: \"1.8%\", direction: \"down\", info: \"End-to-end time from request to response.\" },\n];\n\nconst adPerfDatasets: Record<\"2026\" | \"2025\", number[]> = {\n \"2026\": [520, 560, 540, 610, 498, 650, 670, 700, 730, 760, 780, 810],\n \"2025\": [470, 500, 480, 540, 430, 560, 580, 600, 620, 640, 660, 690],\n};\n\nconst campaignBars: { h: number; cat: \"high\" | \"moderate\" | \"low\" }[] = [\n { h: 70, cat: \"high\" }, { h: 45, cat: \"moderate\" }, { h: 30, cat: \"low\" }, { h: 55, cat: \"moderate\" }, { h: 65, cat: \"high\" }, { h: 40, cat: \"moderate\" },\n { h: 75, cat: \"high\" }, { h: 60, cat: \"high\" }, { h: 25, cat: \"low\" }, { h: 35, cat: \"moderate\" }, { h: 70, cat: \"high\" }, { h: 20, cat: \"low\" },\n { h: 50, cat: \"moderate\" }, { h: 65, cat: \"high\" }, { h: 30, cat: \"low\" }, { h: 55, cat: \"moderate\" }, { h: 60, cat: \"high\" }, { h: 45, cat: \"moderate\" },\n { h: 80, cat: \"high\" }, { h: 70, cat: \"high\" }, { h: 35, cat: \"moderate\" }, { h: 60, cat: \"high\" }, { h: 75, cat: \"high\" }, { h: 50, cat: \"moderate\" },\n { h: 65, cat: \"high\" }, { h: 55, cat: \"moderate\" }, { h: 25, cat: \"low\" }, { h: 70, cat: \"high\" }, { h: 60, cat: \"high\" }, { h: 40, cat: \"moderate\" },\n { h: 75, cat: \"high\" }, { h: 30, cat: \"low\" }, { h: 65, cat: \"high\" }, { h: 50, cat: \"moderate\" }, { h: 35, cat: \"low\" }, { h: 70, cat: \"high\" },\n];\n\nconst campaignsSeed: Campaign[] = [\n { id: \"c1\", name: \"Spring Sale Boost\", status: \"ACTIVE\", budget: 50, spent: 48.67, conversions: 128, convRate: 6.42, roas: 4.21, clicks: 1987, ctr: 6.91 },\n { id: \"c2\", name: \"New App Install Drive\", status: \"ACTIVE\", budget: 40, spent: 36.21, conversions: 312, convRate: 18.35, roas: 3.67, clicks: 1700, ctr: 7.57 },\n { id: \"c3\", name: \"Brand Awareness Q2\", status: \"PAUSED\", budget: 30, spent: 27.89, conversions: null, convRate: null, roas: null, clicks: null, ctr: null },\n { id: \"c4\", name: \"Retargeting Visitors\", status: \"CANCEL\", budget: 25, spent: 12.34, conversions: 42, convRate: 9.24, roas: 5.18, clicks: 455, ctr: 4.62 },\n { id: \"c5\", name: \"Summer Promo Leads\", status: \"COMPLETED\", budget: 35, spent: 31.75, conversions: 68, convRate: 12.07, roas: 2.84, clicks: 563, ctr: 3.94 },\n { id: \"c6\", name: \"Video Views Campaign\", status: \"PAUSED\", budget: 25, spent: 21.43, conversions: null, convRate: null, roas: null, clicks: null, ctr: null },\n];\n\nconst dateRangePresets = [\"1 MAY - 31 MAY 2026\", \"1 APR - 30 APR 2026\", \"1 MAR - 31 MAR 2026\"];\n\nconst notifications = [\n { id: \"n1\", title: \"Spring Sale Boost hit 6.4% conv. rate\", time: \"8m ago\" },\n { id: \"n2\", title: \"Brand Awareness Q2 was paused\", time: \"2h ago\" },\n { id: \"n3\", title: \"Monthly report is ready\", time: \"Yesterday\" },\n];\n\nconst addMenuItems = [\n { key: \"campaign\", label: \"New Campaign\", icon: Megaphone },\n { key: \"adset\", label: \"New Ad Set\", icon: Layers },\n { key: \"audience\", label: \"New Audience\", icon: Users },\n { key: \"report\", label: \"New Report\", icon: BarChart3 },\n];\n\nconst pillSpring = { type: \"spring\" as const, stiffness: 350, damping: 30 };\n\nfunction statusStyle(status: CampaignStatus) {\n switch (status) {\n case \"ACTIVE\":\n return \"bg-blue-500/15 text-blue-400\";\n case \"PAUSED\":\n return \"bg-amber-500/15 text-amber-400\";\n case \"CANCEL\":\n return \"bg-rose-500/15 text-rose-400\";\n case \"COMPLETED\":\n return \"bg-emerald-500/15 text-emerald-400\";\n }\n}\n\nfunction roasStyle(roas: number | null) {\n if (roas == null) return \"text-neutral-500\";\n if (roas > 4) return \"text-emerald-400\";\n if (roas >= 2) return \"text-amber-400\";\n return \"text-rose-400\";\n}\n\n/* ------------------------------------------------------------------ */\n/* Generic atoms */\n/* ------------------------------------------------------------------ */\n\nfunction Dropdown({\n open,\n onClose,\n anchor = \"left\",\n width = 220,\n children,\n}: {\n open: boolean;\n onClose: () => void;\n anchor?: \"left\" | \"right\";\n width?: number;\n children: React.ReactNode;\n}) {\n const ref = useRef(null);\n\n useEffect(() => {\n if (!open) return;\n function handlePointer(e: MouseEvent) {\n if (ref.current && !ref.current.contains(e.target as Node)) onClose();\n }\n function handleKey(e: KeyboardEvent) {\n if (e.key === \"Escape\") onClose();\n }\n document.addEventListener(\"mousedown\", handlePointer);\n document.addEventListener(\"keydown\", handleKey);\n return () => {\n document.removeEventListener(\"mousedown\", handlePointer);\n document.removeEventListener(\"keydown\", handleKey);\n };\n }, [open, onClose]);\n\n return (\n \n {open && (\n \n {children}\n \n )}\n \n );\n}\n\nfunction DropdownItem({\n icon: Icon,\n label,\n onClick,\n active,\n}: {\n icon: IconType;\n label: string;\n onClick?: () => void;\n active?: boolean;\n}) {\n return (\n \n \n {label}\n {active && }\n \n );\n}\n\nfunction MoreHorizontalMenu() {\n const [open, setOpen] = useState(false);\n return (\n
\n \n setOpen(false)} anchor=\"right\" width={150}>\n \n \n \n
\n );\n}\n\nfunction InfoTip({ text }: { text: string }) {\n const [open, setOpen] = useState(false);\n return (\n
\n \n setOpen(false)} anchor=\"right\" width={190}>\n

{text}

\n \n
\n );\n}\n\ntype Platform = \"google\" | \"meta\" | \"tiktok\" | \"linkedin\";\n\nconst platformLogos: Record = {\n google: \"https://api.iconify.design/logos/google-icon.svg\",\n meta: \"https://api.iconify.design/logos/meta-icon.svg\",\n tiktok: \"https://api.iconify.design/logos/tiktok-icon.svg\",\n linkedin: \"https://api.iconify.design/logos/linkedin-icon.svg\",\n};\n\nfunction PlatformIcon({ platform }: { platform: Platform }) {\n return (\n \n );\n}\n\nfunction BaguiLogo() {\n return (\n
\n \n
\n );\n}\n\n/* ------------------------------------------------------------------ */\n/* Sidebar */\n/* ------------------------------------------------------------------ */\n\nfunction NavItem({\n icon,\n iconNode,\n label,\n active,\n collapsed,\n badge,\n onClick,\n}: {\n icon?: IconType;\n iconNode?: React.ReactNode;\n label: string;\n active?: boolean;\n collapsed?: boolean;\n badge?: number;\n onClick?: () => void;\n}) {\n const IconComp = icon;\n return (\n \n {active && }\n \n {iconNode ? iconNode : IconComp ? : null}\n \n {!collapsed && {label}}\n {!collapsed && badge != null && (\n {badge}\n )}\n \n );\n}\n\nfunction SectionHeader({ label, open, onToggle, collapsed }: { label: string; open: boolean; onToggle: () => void; collapsed: boolean }) {\n if (collapsed) return null;\n return (\n \n );\n}\n\nfunction Sidebar({\n activeKey,\n collapsed,\n onSelect,\n onToggleCollapse,\n}: {\n activeKey: SidebarKey;\n collapsed: boolean;\n onSelect: (key: SidebarKey) => void;\n onToggleCollapse: () => void;\n}) {\n const [generalOpen, setGeneralOpen] = useState(true);\n const [accountOpen, setAccountOpen] = useState(true);\n const [profileOpen, setProfileOpen] = useState(false);\n\n return (\n \n
\n {!collapsed ? (\n
\n \n BagUI\n
\n ) : (\n \n )}\n {!collapsed && (\n \n )}\n
\n {collapsed && (\n \n \n \n )}\n\n \n\n
\n onSelect(\"settings\")} />\n \n
\n\n {!collapsed && (\n
\n \n setProfileOpen(false)} width={190}>\n \n \n \n
\n )}\n \n );\n}\n\n/* ------------------------------------------------------------------ */\n/* Top bar + tabs */\n/* ------------------------------------------------------------------ */\n\nfunction TopBar({ query, onQueryChange }: { query: string; onQueryChange: (v: string) => void }) {\n const [openMenu, setOpenMenu] = useState<\"add\" | \"notif\" | null>(null);\n\n return (\n
\n
\n \n onQueryChange(e.target.value)}\n placeholder=\"SEARCH...\"\n className=\"w-full bg-transparent text-[11.5px] uppercase tracking-wide text-neutral-200 placeholder:text-neutral-500 focus:outline-none\"\n />\n \n F\n \n
\n\n
\n
\n setOpenMenu((m) => (m === \"notif\" ? null : \"notif\"))}\n className=\"flex h-8 w-8 items-center justify-center rounded-lg border border-white/[0.07] bg-white/[0.03] text-neutral-400 hover:text-neutral-200\"\n >\n \n \n setOpenMenu(null)} anchor=\"right\" width={240}>\n
Notifications
\n {notifications.map((n) => (\n
\n

{n.title}

\n

{n.time}

\n
\n ))}\n \n
\n\n
\n setOpenMenu((m) => (m === \"add\" ? null : \"add\"))}\n className=\"flex items-center gap-1.5 rounded-lg bg-blue-500 px-3 py-2 text-[11.5px] font-medium uppercase tracking-wide text-white hover:bg-blue-600\"\n >\n Add \n \n setOpenMenu(null)} anchor=\"right\" width={190}>\n {addMenuItems.map((item) => (\n setOpenMenu(null)} />\n ))}\n \n
\n
\n
\n );\n}\n\nfunction TopTabs({ activeTab, onSelect }: { activeTab: TopTabKey; onSelect: (key: TopTabKey) => void }) {\n return (\n
\n {topTabs.map((tab) => {\n const active = tab.key === activeTab;\n return (\n onSelect(tab.key)}\n className={cn(\n \"relative flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[11.5px] uppercase tracking-wide transition-colors\",\n active ? \"text-white\" : \"text-neutral-500 hover:text-neutral-300\"\n )}\n >\n {active && }\n \n {tab.label}\n \n );\n })}\n
\n );\n}\n\n/* ------------------------------------------------------------------ */\n/* Stat cards */\n/* ------------------------------------------------------------------ */\n\nfunction StatCard({ stat }: { stat: (typeof stats)[number] }) {\n const Icon = stat.icon;\n const TrendIcon = stat.direction === \"up\" ? TrendingUp : TrendingDown;\n return (\n
\n
\n \n \n {stat.label}\n \n \n
\n

\n {stat.value}\n {stat.unit && {stat.unit}}\n

\n

\n \n {stat.delta}\n vs last month\n

\n
\n );\n}\n\n/* ------------------------------------------------------------------ */\n/* Ad performance line chart */\n/* ------------------------------------------------------------------ */\n\nfunction AdPerformanceChart({ year, onYearChange }: { year: \"2026\" | \"2025\"; onYearChange: (y: \"2026\" | \"2025\") => void }) {\n const [hovered, setHovered] = useState(null);\n const [menuOpen, setMenuOpen] = useState(false);\n const values = adPerfDatasets[year];\n const activeIndex = hovered ?? 4;\n\n const max = Math.max(...values);\n const min = Math.min(...values);\n const span = max - min || 1;\n const pad = span * 0.25;\n const lo = min - pad;\n const hi = max + pad;\n\n const points = values.map((v, i) => ({\n x: (i / (values.length - 1)) * 100,\n y: 100 - ((v - lo) / (hi - lo)) * 100,\n }));\n const pointsAttr = points.map((p) => `${p.x},${p.y}`).join(\" \");\n const active = points[activeIndex];\n const total = values.reduce((a, b) => a + b, 0);\n\n return (\n
\n
\n Ad Performance\n
\n setMenuOpen((o) => !o)}\n className=\"flex items-center gap-1.5 rounded-lg border border-white/[0.08] bg-white/[0.04] px-2.5 py-1.5 text-[11px] uppercase tracking-wide text-neutral-300\"\n >\n {year} \n \n setMenuOpen(false)} anchor=\"right\" width={110}>\n {([\"2026\", \"2025\"] as const).map((y) => (\n {\n onYearChange(y);\n setMenuOpen(false);\n }}\n />\n ))}\n \n
\n
\n

${(total / 1000).toFixed(2)}M

\n

\n 18.7%\n vs last year\n

\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n\n
\n {values.map((_, i) => (\n
setHovered(i)} onMouseLeave={() => setHovered(null)} />\n ))}\n
\n\n \n\n \n

\n {months[activeIndex]}, {year}\n

\n

\n INCOME {values[activeIndex].toFixed(0)}K\n

\n \n
\n\n
\n {months.map((m, i) => (\n \n {m}\n \n ))}\n
\n
\n );\n}\n\n/* ------------------------------------------------------------------ */\n/* Campaign breakdown bar chart */\n/* ------------------------------------------------------------------ */\n\nconst catColor = { high: \"bg-emerald-400\", moderate: \"bg-amber-400\", low: \"bg-rose-400\" } as const;\nconst catLabel = { high: \"High (>4X)\", moderate: \"Moderate (2-4X)\", low: \"Low (<2X)\" } as const;\n\nfunction CampaignBreakdownChart() {\n const [activeCats, setActiveCats] = useState>(new Set([\"high\", \"moderate\", \"low\"]));\n const [hovered, setHovered] = useState(null);\n\n function toggleCat(cat: \"high\" | \"moderate\" | \"low\") {\n setActiveCats((prev) => {\n const next = new Set(prev);\n if (next.has(cat)) {\n if (next.size > 1) next.delete(cat);\n } else {\n next.add(cat);\n }\n return next;\n });\n }\n\n return (\n
\n
\n Campaign Breakdown\n
\n {([\"high\", \"moderate\", \"low\"] as const).map((cat) => (\n toggleCat(cat)}\n className={cn(\"flex items-center gap-1.5 text-[10.5px] uppercase tracking-wide transition-opacity\", activeCats.has(cat) ? \"opacity-100\" : \"opacity-30\")}\n >\n \n {catLabel[cat]}\n \n ))}\n \n
\n
\n

4.8x

\n

\n 9.4%\n vs last month\n

\n\n
\n {campaignBars.map((bar, i) => {\n const dimmed = !activeCats.has(bar.cat);\n return (\n
setHovered(i)} onMouseLeave={() => setHovered(null)}>\n {hovered === i && (\n
\n {(bar.h / 20).toFixed(1)}x\n
\n )}\n \n
\n );\n })}\n
\n
\n );\n}\n\n/* ------------------------------------------------------------------ */\n/* Deployment table */\n/* ------------------------------------------------------------------ */\n\nconst columns: { key: SortKey; label: string }[] = [\n { key: \"name\", label: \"Campaign\" },\n { key: \"status\", label: \"Status\" },\n { key: \"budget\", label: \"Budget\" },\n { key: \"spent\", label: \"Spent\" },\n { key: \"conversions\", label: \"Conversions\" },\n { key: \"convRate\", label: \"Conv. Rate\" },\n { key: \"roas\", label: \"ROAS\" },\n { key: \"clicks\", label: \"Clicks\" },\n { key: \"ctr\", label: \"CTR\" },\n];\n\nfunction DeploymentTable({ query }: { query: string }) {\n const [statusFilter, setStatusFilter] = useState<\"ALL\" | CampaignStatus>(\"ALL\");\n const [statusMenuOpen, setStatusMenuOpen] = useState(false);\n const [dateMenuOpen, setDateMenuOpen] = useState(false);\n const [dateRange, setDateRange] = useState(dateRangePresets[0]);\n const [sortKey, setSortKey] = useState(\"name\");\n const [sortDir, setSortDir] = useState<\"asc\" | \"desc\">(\"asc\");\n\n function handleSort(key: SortKey) {\n if (key === sortKey) {\n setSortDir((d) => (d === \"asc\" ? \"desc\" : \"asc\"));\n } else {\n setSortKey(key);\n setSortDir(\"asc\");\n }\n }\n\n const rows = useMemo(() => {\n const filtered = campaignsSeed.filter((c) => {\n const matchesQuery = c.name.toLowerCase().includes(query.trim().toLowerCase());\n const matchesStatus = statusFilter === \"ALL\" || c.status === statusFilter;\n return matchesQuery && matchesStatus;\n });\n const sorted = [...filtered].sort((a, b) => {\n const av = a[sortKey];\n const bv = b[sortKey];\n if (av == null && bv == null) return 0;\n if (av == null) return 1;\n if (bv == null) return -1;\n if (typeof av === \"string\" && typeof bv === \"string\") {\n return sortDir === \"asc\" ? av.localeCompare(bv) : bv.localeCompare(av);\n }\n if (typeof av === \"number\" && typeof bv === \"number\") {\n return sortDir === \"asc\" ? av - bv : bv - av;\n }\n return 0;\n });\n return sorted;\n }, [query, statusFilter, sortKey, sortDir]);\n\n return (\n
\n
\n
\n \n Deployment in progress\n
\n setStatusMenuOpen((o) => !o)}\n className=\"flex items-center gap-1.5 rounded-md bg-white/[0.06] px-2.5 py-1 text-[10.5px] uppercase tracking-wide text-neutral-300 hover:bg-white/[0.1]\"\n >\n {statusFilter === \"ALL\" ? \"Status\" : statusFilter}\n \n setStatusMenuOpen(false)} width={160}>\n {([\"ALL\", \"ACTIVE\", \"PAUSED\", \"CANCEL\", \"COMPLETED\"] as const).map((s) => (\n {\n setStatusFilter(s);\n setStatusMenuOpen(false);\n }}\n />\n ))}\n \n
\n
\n
\n setDateMenuOpen((o) => !o)}\n className=\"flex items-center gap-1.5 rounded-lg border border-white/[0.08] bg-white/[0.04] px-3 py-1.5 text-[11px] uppercase tracking-wide text-neutral-300\"\n >\n {dateRange} \n \n setDateMenuOpen(false)} anchor=\"right\" width={200}>\n {dateRangePresets.map((preset) => (\n {\n setDateRange(preset);\n setDateMenuOpen(false);\n }}\n />\n ))}\n \n
\n
\n\n
\n
\n
\n {columns.map((col) => (\n \n ))}\n
\n\n \n {rows.map((c) => (\n \n {c.name}\n \n {c.status}\n \n ${c.budget.toFixed(2)}\n ${c.spent.toFixed(2)}\n {c.conversions ?? \"-\"}\n {c.convRate != null ? `${c.convRate}%` : \"-\"}\n {c.roas ?? \"-\"}\n {c.clicks ?? \"-\"}\n {c.ctr != null ? `${c.ctr}%` : \"-\"}\n \n ))}\n \n {rows.length === 0 &&

No campaigns match your filters.

}\n
\n
\n
\n );\n}\n\n/* ------------------------------------------------------------------ */\n/* Empty state (non-overview sections) */\n/* ------------------------------------------------------------------ */\n\nfunction EmptyStateDark({ icon: Icon, title, description }: { icon: IconType; title: string; description: string }) {\n return (\n \n \n \n \n

{title}

\n

{description}

\n \n );\n}\n\n/* ------------------------------------------------------------------ */\n/* Dashboard view */\n/* ------------------------------------------------------------------ */\n\nfunction DashboardView({\n query,\n year,\n onYearChange,\n}: {\n query: string;\n year: \"2026\" | \"2025\";\n onYearChange: (y: \"2026\" | \"2025\") => void;\n}) {\n return (\n \n
\n {stats.map((stat) => (\n \n ))}\n
\n\n
\n \n \n
\n\n \n \n );\n}\n\n/* ------------------------------------------------------------------ */\n/* Page */\n/* ------------------------------------------------------------------ */\n\nexport default function AdformaDashboard() {\n const [sidebarKey, setSidebarKey] = useState(\"overview\");\n const [topTab, setTopTab] = useState(\"dashboard\");\n const [collapsed, setCollapsed] = useState(false);\n const [query, setQuery] = useState(\"\");\n const [year, setYear] = useState<\"2026\" | \"2025\">(\"2026\");\n\n function handleSelectSidebar(key: SidebarKey) {\n setSidebarKey(key);\n setTopTab(\"dashboard\");\n setQuery(\"\");\n }\n\n function handleSelectTab(key: TopTabKey) {\n setTopTab(key);\n setQuery(\"\");\n }\n\n const sidebarCopy = sectionCopy[sidebarKey];\n const tabCopy = topTabCopy[topTab];\n\n return (\n
\n setCollapsed((c) => !c)} />\n
\n \n {sidebarKey === \"overview\" && }\n
\n \n {sidebarKey === \"overview\" && topTab === \"dashboard\" ? (\n \n ) : sidebarKey === \"overview\" && tabCopy ? (\n \n ) : (\n sidebarCopy && \n )}\n \n
\n
\n
\n );\n}", "type": "registry:block", "target": "components/Dashboard/dashboard-ads.tsx" } ], "type": "registry:block" }