import { useState, useEffect } from 'react';
import { AIDPClient } from '@aidp/sdk';
import { Line, Bar, Pie } from 'react-chartjs-2';
const client = new AIDPClient({ apiKey: process.env.NEXT_PUBLIC_AIDP_API_KEY });
export function AnalyticsDashboard({ businessId }: { businessId: string }) {
const [metrics, setMetrics] = useState(null);
const [loading, setLoading] = useState(true);
const [period, setPeriod] = useState('last_30_days');
useEffect(() => {
loadMetrics();
}, [businessId, period]);
const loadMetrics = async () => {
setLoading(true);
try {
const [upstream, journeys, attribution] = await Promise.all([
client.analytics.upstream({ businessId, period }),
client.analytics.intentJourneys({ businessId, period }),
client.analytics.attribution({ businessId, period })
]);
setMetrics({ upstream, journeys, attribution });
} catch (error) {
console.error('Failed to load metrics:', error);
} finally {
setLoading(false);
}
};
if (loading) return <div>Loading analytics...</div>;
if (!metrics) return <div>No data available</div>;
return (
<div className="analytics-dashboard">
<div className="period-selector">
<select value={period} onChange={(e) => setPeriod(e.target.value)}>
<option value="last_7_days">Last 7 Days</option>
<option value="last_30_days">Last 30 Days</option>
<option value="last_90_days">Last 90 Days</option>
<option value="last_year">Last Year</option>
</select>
</div>
<div className="metrics-grid">
<MetricCard
title="Total Impressions"
value={metrics.upstream.data.totalImpressions}
trend={metrics.upstream.data.trend}
/>
<MetricCard
title="Citations"
value={metrics.upstream.data.totalCitations}
trend={metrics.upstream.data.trend}
/>
<MetricCard
title="Citation Rate"
value={`${metrics.upstream.data.citationRate}%`}
trend={metrics.upstream.data.trend}
/>
<MetricCard
title="AI Visibility Score"
value={metrics.upstream.data.aiVisibilityScore}
trend={metrics.upstream.data.trend}
/>
</div>
<div className="charts-grid">
<div className="chart">
<h3>Impressions Over Time</h3>
<Line data={getImpressionsChartData(metrics.upstream.data)} />
</div>
<div className="chart">
<h3>Platform Breakdown</h3>
<Pie data={getPlatformChartData(metrics.upstream.data)} />
</div>
<div className="chart">
<h3>Intent Journeys</h3>
<Bar data={getJourneysChartData(metrics.journeys.data)} />
</div>
<div className="chart">
<h3>Attribution</h3>
<Bar data={getAttributionChartData(metrics.attribution.data)} />
</div>
</div>
</div>
);
}
function MetricCard({ title, value, trend }) {
const trendColor = trend > 0 ? 'green' : trend < 0 ? 'red' : 'gray';
const trendIcon = trend > 0 ? '↑' : trend < 0 ? '↓' : '→';
return (
<div className="metric-card">
<h4>{title}</h4>
<div className="value">{value}</div>
<div className="trend" style={{ color: trendColor }}>
{trendIcon} {Math.abs(trend)}%
</div>
</div>
);
}
function getImpressionsChartData(data) {
return {
labels: data.timeline.map(t => t.date),
datasets: [{
label: 'Impressions',
data: data.timeline.map(t => t.impressions),
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
};
}
function getPlatformChartData(data) {
return {
labels: Object.keys(data.platformBreakdown),
datasets: [{
data: Object.values(data.platformBreakdown),
backgroundColor: [
'rgba(255, 99, 132, 0.8)',
'rgba(54, 162, 235, 0.8)',
'rgba(255, 206, 86, 0.8)',
]
}]
};
}
function getJourneysChartData(data) {
return {
labels: ['Awareness', 'Consideration', 'Decision'],
datasets: [{
label: 'Intent Journeys',
data: [
data.awarenessStage,
data.considerationStage,
data.decisionStage
],
backgroundColor: 'rgba(75, 192, 192, 0.8)'
}]
};
}
function getAttributionChartData(data) {
return {
labels: data.touchpoints.map(t => t.platform),
datasets: [{
label: 'Conversions',
data: data.touchpoints.map(t => t.conversions),
backgroundColor: 'rgba(153, 102, 255, 0.8)'
}]
};
}