"use client"; import { useState } from "react"; import { motion, } from "framer-motion"; import { ComposedChart, Line, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, } from "recharts"; import { Filter, Download, RefreshCw, Calendar, ChevronDown, Search, LayoutTemplate } from "lucide-react"; import { KpiCard, HeatmapCell, StatusBadge, HOURLY_PERFORMANCE, DAY_PARTING_DATA, CAMPAIGNS } from "@/src/components/CoreLandingPages/AgencyPortfolio/tsx/QUANTUMANALYTICS"; import { cn } from "@/src/lib/utils"; // --- MAIN DASHBOARD --- export default function PerformanceDashboard() { const [dateRange, setDateRange] = useState("Last 30 Days"); return (

{/* Top Navigation Bar */}

QUANTUM / PPC

Account: Acme_Global_Ads (459-221)

{dateRange}

{/* Budget Pacing Ticker */}

Daily Budget Pacing:

72% ($4,320 / $6,000)

Server Time: 14:32:01 UTC API Status: ONLINE

{/* KPI Grid */}

{/* Chart Row */}

{/* Main Composite Chart */}

Spend vs ROAS Velocity

Hourly breakdown of efficiency

{['Spend', 'Clicks', 'Impr'].map(m => ( ))}

`$${val}`} /> `${val}x`} />

{/* Heatmap Section */}

Day-Parting Efficiency

Conversion intensity by Day & Time

{DAY_PARTING_DATA.map((row, i) => (

{row.day}

{row.hours.map((intensity, j) => ( ))}

))}

00:00 06:00 12:00 18:00

{/* Dense Data Table */}

Campaign Performance

{CAMPAIGNS.map((camp) => ( ))}

	Campaign Name	Status	Spend	Impr.	Clicks	CTR	CPC	Conv.	CPA	ROAS
	{camp.name}		${camp.spend.toLocaleString()}	{camp.impr.toLocaleString()}	{camp.clicks.toLocaleString()}	{camp.ctr}%	${camp.cpc}	{camp.conv}	50 ? '#ef4444' : '#d4d4d8' }}>${camp.cpa}	4 ? '#10b981' : camp.roas < 2 ? '#ef4444' : '#fbbf24' }}> {camp.roas}x

{/* Pagination Footer */}

Showing 1-6 of 24 Campaigns

); }

Property	Type	Default	Description
primaryColor	string	#00f5ff	Primary quantum blue for data visualizations.
accentColor	string	#ff00ff	Accent color for highlights and metrics.
enableParticles	boolean	true	Enable quantum particle effects.
dataAnimationSpeed	number	1	Speed of data visualization animations.

Quantum Analytics

Props