594 lines
21 KiB
TypeScript
594 lines
21 KiB
TypeScript
'use client';
|
||
|
||
import React, { useState, useEffect, useCallback } from 'react';
|
||
import dynamic from 'next/dynamic';
|
||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
|
||
import { Button } from '@/components/ui/Button';
|
||
import { Badge } from '@/components/ui/Badge';
|
||
import { Table } from '@/components/ui/Table';
|
||
import { useTranslation } from '@/hooks/useTranslation';
|
||
import { StatCard, Sparkline } from '@/components/analytics';
|
||
import { Line, Doughnut } from 'react-chartjs-2';
|
||
import {
|
||
Chart as ChartJS,
|
||
CategoryScale,
|
||
LinearScale,
|
||
PointElement,
|
||
LineElement,
|
||
BarElement,
|
||
ArcElement,
|
||
Title,
|
||
Tooltip,
|
||
Legend,
|
||
Filler,
|
||
} from 'chart.js';
|
||
import {
|
||
BarChart3,
|
||
Users,
|
||
Smartphone,
|
||
Globe,
|
||
Calendar,
|
||
Download,
|
||
TrendingUp,
|
||
QrCode,
|
||
HelpCircle,
|
||
} from 'lucide-react';
|
||
|
||
// Dynamically import GeoMap to avoid SSR issues with d3
|
||
const GeoMap = dynamic(() => import('@/components/analytics/GeoMap'), {
|
||
ssr: false,
|
||
loading: () => (
|
||
<div className="h-64 bg-gray-100 rounded-lg animate-pulse flex items-center justify-center">
|
||
<span className="text-gray-400">Loading map...</span>
|
||
</div>
|
||
),
|
||
});
|
||
|
||
ChartJS.register(
|
||
CategoryScale,
|
||
LinearScale,
|
||
PointElement,
|
||
LineElement,
|
||
BarElement,
|
||
ArcElement,
|
||
Title,
|
||
Tooltip,
|
||
Legend,
|
||
Filler
|
||
);
|
||
|
||
interface QRPerformance {
|
||
id: string;
|
||
title: string;
|
||
type: string;
|
||
totalScans: number;
|
||
uniqueScans: number;
|
||
conversion: number;
|
||
trend: 'up' | 'down' | 'flat';
|
||
trendPercentage: number;
|
||
sparkline: number[];
|
||
lastScanned: string | null;
|
||
isNew?: boolean;
|
||
}
|
||
|
||
interface CountryStat {
|
||
country: string;
|
||
count: number;
|
||
percentage: number;
|
||
trend: 'up' | 'down' | 'flat';
|
||
trendPercentage: number;
|
||
isNew?: boolean;
|
||
}
|
||
|
||
interface AnalyticsData {
|
||
summary: {
|
||
totalScans: number;
|
||
uniqueScans: number;
|
||
avgScansPerQR: number;
|
||
mobilePercentage: number;
|
||
topCountry: string;
|
||
topCountryPercentage: number;
|
||
scansTrend?: { trend: 'up' | 'down' | 'flat'; percentage: number; isNew?: boolean };
|
||
avgScansTrend?: { trend: 'up' | 'down' | 'flat'; percentage: number; isNew?: boolean };
|
||
comparisonPeriod?: string;
|
||
};
|
||
deviceStats: Record<string, number>;
|
||
countryStats: CountryStat[];
|
||
dailyScans: Record<string, number>;
|
||
qrPerformance: QRPerformance[];
|
||
}
|
||
|
||
export default function AnalyticsPage() {
|
||
const { t } = useTranslation();
|
||
const [timeRange, setTimeRange] = useState('7');
|
||
const [loading, setLoading] = useState(true);
|
||
const [analyticsData, setAnalyticsData] = useState<AnalyticsData | null>(null);
|
||
|
||
const fetchAnalytics = useCallback(async () => {
|
||
setLoading(true);
|
||
try {
|
||
const response = await fetch(`/api/analytics/summary?range=${timeRange}`);
|
||
if (response.ok) {
|
||
const data = await response.json();
|
||
setAnalyticsData(data);
|
||
} else {
|
||
setAnalyticsData(null);
|
||
}
|
||
} catch (error) {
|
||
console.error('Error fetching analytics:', error);
|
||
setAnalyticsData(null);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, [timeRange]);
|
||
|
||
useEffect(() => {
|
||
fetchAnalytics();
|
||
}, [fetchAnalytics]);
|
||
|
||
const exportReport = () => {
|
||
if (!analyticsData) return;
|
||
|
||
const csvData = [
|
||
['QR Master Analytics Report'],
|
||
['Generated:', new Date().toLocaleString()],
|
||
['Time Range:', `Last ${timeRange} days`],
|
||
[''],
|
||
['Summary'],
|
||
['Total Scans', analyticsData.summary.totalScans],
|
||
['Unique Scans', analyticsData.summary.uniqueScans],
|
||
['Mobile Usage %', analyticsData.summary.mobilePercentage],
|
||
['Top Country', analyticsData.summary.topCountry],
|
||
[''],
|
||
['Top QR Codes'],
|
||
['Title', 'Type', 'Total Scans', 'Unique Scans', 'Conversion %', 'Last Scanned'],
|
||
...analyticsData.qrPerformance.map((qr) => [
|
||
qr.title,
|
||
qr.type,
|
||
qr.totalScans,
|
||
qr.uniqueScans,
|
||
qr.conversion,
|
||
qr.lastScanned ? new Date(qr.lastScanned).toLocaleString() : 'Never',
|
||
]),
|
||
];
|
||
|
||
const csv = csvData.map((row) => row.join(',')).join('\n');
|
||
const blob = new Blob([csv], { type: 'text/csv' });
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = `qr-analytics-${new Date().toISOString().split('T')[0]}.csv`;
|
||
a.click();
|
||
URL.revokeObjectURL(url);
|
||
};
|
||
|
||
// Prepare chart data
|
||
const daysToShow = parseInt(timeRange);
|
||
const dateRange = Array.from({ length: daysToShow }, (_, i) => {
|
||
const date = new Date();
|
||
date.setDate(date.getDate() - (daysToShow - 1 - i));
|
||
return date.toISOString().split('T')[0];
|
||
});
|
||
|
||
const scanChartData = {
|
||
labels: dateRange.map((date) => {
|
||
const d = new Date(date);
|
||
return d.toLocaleDateString('en', { month: 'short', day: 'numeric' });
|
||
}),
|
||
datasets: [
|
||
{
|
||
label: 'Scans',
|
||
data: dateRange.map((date) => analyticsData?.dailyScans[date] || 0),
|
||
borderColor: 'rgb(59, 130, 246)',
|
||
backgroundColor: (context: any) => {
|
||
const chart = context.chart;
|
||
const { ctx, chartArea } = chart;
|
||
if (!chartArea) return 'rgba(59, 130, 246, 0.1)';
|
||
|
||
const gradient = ctx.createLinearGradient(0, chartArea.top, 0, chartArea.bottom);
|
||
gradient.addColorStop(0, 'rgba(59, 130, 246, 0.3)');
|
||
gradient.addColorStop(1, 'rgba(59, 130, 246, 0.01)');
|
||
return gradient;
|
||
},
|
||
tension: 0.4,
|
||
fill: true,
|
||
pointRadius: 4,
|
||
pointBackgroundColor: 'rgb(59, 130, 246)',
|
||
pointBorderColor: '#fff',
|
||
pointBorderWidth: 2,
|
||
pointHoverRadius: 6,
|
||
},
|
||
],
|
||
};
|
||
|
||
const deviceChartData = {
|
||
labels: ['Desktop', 'Mobile', 'Tablet'],
|
||
datasets: [
|
||
{
|
||
data: [
|
||
analyticsData?.deviceStats.desktop || 0,
|
||
analyticsData?.deviceStats.mobile || 0,
|
||
analyticsData?.deviceStats.tablet || 0,
|
||
],
|
||
backgroundColor: [
|
||
'rgba(59, 130, 246, 0.85)',
|
||
'rgba(34, 197, 94, 0.85)',
|
||
'rgba(249, 115, 22, 0.85)',
|
||
],
|
||
borderWidth: 0,
|
||
hoverOffset: 4,
|
||
},
|
||
],
|
||
};
|
||
|
||
// Find top performing QR code
|
||
const topQR = analyticsData?.qrPerformance[0];
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="space-y-8">
|
||
<div className="animate-pulse">
|
||
<div className="h-8 bg-gray-200 rounded w-1/4 mb-4" />
|
||
<div className="h-4 bg-gray-200 rounded w-1/2 mb-8" />
|
||
<div className="grid md:grid-cols-4 gap-6 mb-8">
|
||
{[1, 2, 3, 4].map((i) => (
|
||
<div key={i} className="h-32 bg-gray-200 rounded-xl" />
|
||
))}
|
||
</div>
|
||
<div className="grid lg:grid-cols-2 gap-6">
|
||
<div className="h-80 bg-gray-200 rounded-xl" />
|
||
<div className="h-80 bg-gray-200 rounded-xl" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-8">
|
||
{/* Header */}
|
||
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
|
||
<div>
|
||
<h1 className="text-3xl font-bold text-gray-900">QR Code Analytics</h1>
|
||
<p className="text-gray-500 mt-1">Track and analyze your QR code performance</p>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-3">
|
||
{/* Date Range Selector */}
|
||
<div className="inline-flex items-center bg-gray-100 rounded-lg p-1">
|
||
{[
|
||
{ value: '7', label: '7 Days' },
|
||
{ value: '30', label: '30 Days' },
|
||
{ value: '90', label: '90 Days' },
|
||
].map((range) => (
|
||
<button
|
||
key={range.value}
|
||
onClick={() => setTimeRange(range.value)}
|
||
className={`px-4 py-2 text-sm font-medium rounded-md transition-all ${timeRange === range.value
|
||
? 'bg-white text-gray-900 shadow-sm'
|
||
: 'text-gray-600 hover:text-gray-900'
|
||
}`}
|
||
>
|
||
{range.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
<Button onClick={exportReport} variant="primary" className="flex items-center gap-2">
|
||
<Download className="w-4 h-4" />
|
||
Export Report
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* KPI Cards */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
<StatCard
|
||
title="Total Scans"
|
||
value={analyticsData?.summary.totalScans || 0}
|
||
trend={
|
||
analyticsData?.summary.scansTrend
|
||
? {
|
||
direction: analyticsData.summary.scansTrend.trend,
|
||
percentage: analyticsData.summary.scansTrend.percentage,
|
||
isNew: analyticsData.summary.scansTrend.isNew,
|
||
period: analyticsData.summary.comparisonPeriod,
|
||
}
|
||
: undefined
|
||
}
|
||
icon={<BarChart3 className="w-5 h-5 text-primary-600" />}
|
||
/>
|
||
|
||
<StatCard
|
||
title="Avg Scans/QR"
|
||
value={analyticsData?.summary.avgScansPerQR || 0}
|
||
trend={
|
||
analyticsData?.summary.avgScansTrend
|
||
? {
|
||
direction: analyticsData.summary.avgScansTrend.trend,
|
||
percentage: analyticsData.summary.avgScansTrend.percentage,
|
||
isNew: analyticsData.summary.avgScansTrend.isNew,
|
||
period: analyticsData.summary.comparisonPeriod,
|
||
}
|
||
: undefined
|
||
}
|
||
icon={<TrendingUp className="w-5 h-5 text-primary-600" />}
|
||
/>
|
||
|
||
<StatCard
|
||
title="Mobile Usage"
|
||
value={`${analyticsData?.summary.mobilePercentage || 0}%`}
|
||
subtitle="Of total scans"
|
||
icon={<Smartphone className="w-5 h-5 text-primary-600" />}
|
||
/>
|
||
|
||
<StatCard
|
||
title="Top Country"
|
||
value={analyticsData?.summary.topCountry || 'N/A'}
|
||
subtitle={`${analyticsData?.summary.topCountryPercentage || 0}% of total`}
|
||
icon={<Globe className="w-5 h-5 text-primary-600" />}
|
||
/>
|
||
</div>
|
||
|
||
{/* Main Chart Row */}
|
||
<div className="grid lg:grid-cols-3 gap-6">
|
||
{/* Scans Over Time - Takes 2 columns */}
|
||
<Card className="lg:col-span-2">
|
||
<CardHeader className="flex flex-row items-center justify-between">
|
||
<CardTitle className="text-lg font-semibold">Scan Trends Over Time</CardTitle>
|
||
<div className="flex items-center gap-2 text-sm text-gray-500">
|
||
<Calendar className="w-4 h-4" />
|
||
<span>{timeRange} Days</span>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="h-72">
|
||
<Line
|
||
data={scanChartData}
|
||
options={{
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
interaction: {
|
||
mode: 'index',
|
||
intersect: false,
|
||
},
|
||
plugins: {
|
||
legend: { display: false },
|
||
tooltip: {
|
||
backgroundColor: 'rgba(17, 24, 39, 0.9)',
|
||
titleColor: '#fff',
|
||
bodyColor: '#fff',
|
||
padding: 12,
|
||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||
borderWidth: 1,
|
||
displayColors: false,
|
||
callbacks: {
|
||
title: (items) => items[0]?.label || '',
|
||
label: (item) => `${item.formattedValue} scans`,
|
||
},
|
||
},
|
||
},
|
||
scales: {
|
||
x: {
|
||
grid: { display: false },
|
||
ticks: { color: '#9CA3AF' },
|
||
},
|
||
y: {
|
||
beginAtZero: true,
|
||
grid: { color: 'rgba(156, 163, 175, 0.1)' },
|
||
ticks: { color: '#9CA3AF', precision: 0 },
|
||
},
|
||
},
|
||
}}
|
||
/>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Device Types Donut */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-lg font-semibold">Device Types</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="h-64 flex items-center justify-center">
|
||
{(analyticsData?.summary.totalScans || 0) > 0 ? (
|
||
<Doughnut
|
||
data={deviceChartData}
|
||
options={{
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
cutout: '65%',
|
||
plugins: {
|
||
legend: {
|
||
position: 'bottom',
|
||
labels: {
|
||
padding: 16,
|
||
usePointStyle: true,
|
||
pointStyle: 'circle',
|
||
},
|
||
},
|
||
},
|
||
}}
|
||
/>
|
||
) : (
|
||
<p className="text-gray-400">No scan data available</p>
|
||
)}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* Geographic & Country Stats Row */}
|
||
<div className="grid lg:grid-cols-2 gap-6">
|
||
{/* Geographic Insights with Map */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-lg font-semibold">Geographic Insights</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="h-64">
|
||
<GeoMap
|
||
countryStats={analyticsData?.countryStats || []}
|
||
totalScans={analyticsData?.summary.totalScans || 0}
|
||
/>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Top Countries Table */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-lg font-semibold">Top Countries</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
{(analyticsData?.countryStats?.length || 0) > 0 ? (
|
||
<div className="space-y-3">
|
||
{analyticsData!.countryStats.slice(0, 5).map((country, index) => (
|
||
<div
|
||
key={country.country}
|
||
className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
<span className="text-lg font-semibold text-gray-400 w-6">
|
||
{index + 1}
|
||
</span>
|
||
<span className="font-medium text-gray-900">{country.country}</span>
|
||
</div>
|
||
<div className="flex items-center gap-4">
|
||
<span className="text-gray-600">{country.count.toLocaleString()}</span>
|
||
<span className="text-gray-400 text-sm w-12 text-right">
|
||
{country.percentage}%
|
||
</span>
|
||
<Badge
|
||
variant={
|
||
country.trend === 'up'
|
||
? 'success'
|
||
: country.trend === 'down'
|
||
? 'error'
|
||
: 'default'
|
||
}
|
||
>
|
||
{country.trend === 'up' ? '↑' : country.trend === 'down' ? '↓' : '→'}
|
||
{country.trendPercentage}%{country.isNew ? ' (new)' : ''}
|
||
</Badge>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<p className="text-gray-400 text-center py-8">No country data available yet</p>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* Top Performing QR Codes with Sparklines */}
|
||
<Card className="overflow-visible">
|
||
<CardHeader className="flex flex-row items-center justify-between">
|
||
<CardTitle className="text-lg font-semibold flex items-center gap-2">
|
||
<QrCode className="w-5 h-5" />
|
||
Top Performing QR Codes
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
{(analyticsData?.qrPerformance?.length || 0) > 0 ? (
|
||
<div className="overflow-x-auto overflow-y-visible">
|
||
<Table>
|
||
<thead>
|
||
<tr className="border-b border-gray-100">
|
||
<th className="h-12 px-4 text-left align-middle font-medium text-gray-500">
|
||
QR Code
|
||
</th>
|
||
<th className="h-12 px-4 text-left align-middle font-medium text-gray-500">
|
||
Type
|
||
</th>
|
||
<th className="h-12 px-4 text-left align-middle font-medium text-gray-500">
|
||
Total Scans
|
||
</th>
|
||
<th className="h-12 px-4 text-left align-middle font-medium text-gray-500">
|
||
Unique Scans
|
||
</th>
|
||
<th className="h-12 px-4 text-left align-middle font-medium text-gray-500">
|
||
<div className="flex items-center gap-1.5">
|
||
<span>Conversions</span>
|
||
<div className="group relative inline-block">
|
||
<HelpCircle className="w-3.5 h-3.5 text-gray-400 cursor-help" />
|
||
<div className="invisible group-hover:visible absolute top-full left-1/2 -translate-x-1/2 mt-2 w-72 p-3 bg-gray-900 text-white text-xs rounded-lg shadow-xl z-[9999] pointer-events-none">
|
||
<div className="font-semibold mb-1">Conversion Rate</div>
|
||
<div className="text-gray-300">
|
||
Percentage of unique scans vs total scans. Formula: (Unique Scans / Total Scans) × 100%
|
||
</div>
|
||
<div className="absolute bottom-full left-1/2 -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-b-4 border-l-transparent border-r-transparent border-b-gray-900"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</th>
|
||
<th className="h-12 px-4 text-left align-middle font-medium text-gray-500">
|
||
Trend
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{analyticsData!.qrPerformance.map((qr) => (
|
||
<tr
|
||
key={qr.id}
|
||
className="border-b border-gray-50 transition-colors hover:bg-gray-50/50"
|
||
>
|
||
<td className="px-4 py-4 align-middle">
|
||
<span className="font-medium text-gray-900">{qr.title}</span>
|
||
</td>
|
||
<td className="px-4 py-4 align-middle">
|
||
<Badge variant={qr.type === 'DYNAMIC' ? 'info' : 'default'}>
|
||
{qr.type}
|
||
</Badge>
|
||
</td>
|
||
<td className="px-4 py-4 align-middle font-medium">
|
||
{qr.totalScans.toLocaleString()}
|
||
</td>
|
||
<td className="px-4 py-4 align-middle">{qr.uniqueScans.toLocaleString()}</td>
|
||
<td className="px-4 py-4 align-middle">{qr.conversion}%</td>
|
||
<td className="px-4 py-4 align-middle">
|
||
<div className="flex items-center gap-3">
|
||
<Sparkline
|
||
data={qr.sparkline || [0, 0, 0, 0, 0, 0, 0]}
|
||
color={
|
||
qr.trend === 'up'
|
||
? 'green'
|
||
: qr.trend === 'down'
|
||
? 'red'
|
||
: 'blue'
|
||
}
|
||
/>
|
||
<Badge
|
||
variant={
|
||
qr.trend === 'up'
|
||
? 'success'
|
||
: qr.trend === 'down'
|
||
? 'error'
|
||
: 'default'
|
||
}
|
||
>
|
||
{qr.trend === 'up' ? '↑' : qr.trend === 'down' ? '↓' : '→'}
|
||
{qr.trendPercentage}%{qr.isNew ? ' (new)' : ''}
|
||
</Badge>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</Table>
|
||
</div>
|
||
) : (
|
||
<div className="text-center py-12">
|
||
<QrCode className="w-12 h-12 text-gray-300 mx-auto mb-4" />
|
||
<p className="text-gray-500">
|
||
No QR codes created yet. Create your first QR code to see analytics!
|
||
</p>
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
);
|
||
} |