style
This commit is contained in:
@@ -1,151 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { addDays, format } from 'date-fns';
|
||||
import { DateRangePicker } from '../../components/ui/DateRangePicker';
|
||||
import TimeSeriesChart from '../../components/charts/TimeSeriesChart';
|
||||
import { TimeSeriesData } from '../../api/types';
|
||||
|
||||
interface ConversionStats {
|
||||
totalConversions: number;
|
||||
conversionRate: number;
|
||||
averageValue: number;
|
||||
conversionsByType: {
|
||||
type: string;
|
||||
count: number;
|
||||
value: number;
|
||||
percentage: number;
|
||||
}[];
|
||||
}
|
||||
|
||||
export default function ConversionsPage() {
|
||||
const [dateRange, setDateRange] = useState({
|
||||
from: new Date('2024-02-01'),
|
||||
to: new Date('2025-03-05')
|
||||
});
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [stats, setStats] = useState<ConversionStats | null>(null);
|
||||
const [timeSeriesData, setTimeSeriesData] = useState<TimeSeriesData[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const startTime = format(dateRange.from, "yyyy-MM-dd'T'HH:mm:ss'Z'");
|
||||
const endTime = format(dateRange.to, "yyyy-MM-dd'T'HH:mm:ss'Z'");
|
||||
|
||||
const [statsRes, timeSeriesRes] = await Promise.all([
|
||||
fetch(`/api/events/conversions/stats?startTime=${startTime}&endTime=${endTime}`),
|
||||
fetch(`/api/events/conversions/time-series?startTime=${startTime}&endTime=${endTime}`)
|
||||
]);
|
||||
|
||||
const [statsData, timeSeriesData] = await Promise.all([
|
||||
statsRes.json(),
|
||||
timeSeriesRes.json()
|
||||
]);
|
||||
|
||||
if (!statsRes.ok) throw new Error(statsData.error || 'Failed to fetch conversion stats');
|
||||
if (!timeSeriesRes.ok) throw new Error(timeSeriesData.error || 'Failed to fetch time series data');
|
||||
|
||||
setStats(statsData);
|
||||
setTimeSeriesData(timeSeriesData.data);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'An error occurred while fetching data');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [dateRange]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<div className="text-red-500">{error}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Conversion Analytics</h1>
|
||||
<DateRangePicker
|
||||
value={dateRange}
|
||||
onChange={setDateRange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{stats && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
|
||||
<h3 className="text-sm font-medium text-gray-500 dark:text-gray-400">Total Conversions</h3>
|
||||
<p className="text-2xl font-semibold text-gray-900 dark:text-gray-100">{stats.totalConversions.toLocaleString()}</p>
|
||||
</div>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
|
||||
<h3 className="text-sm font-medium text-gray-500 dark:text-gray-400">Conversion Rate</h3>
|
||||
<p className="text-2xl font-semibold text-gray-900 dark:text-gray-100">{stats.conversionRate.toFixed(2)}%</p>
|
||||
</div>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
|
||||
<h3 className="text-sm font-medium text-gray-500 dark:text-gray-400">Average Value</h3>
|
||||
<p className="text-2xl font-semibold text-gray-900 dark:text-gray-100">${stats.averageValue.toFixed(2)}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-8">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Conversion Trends</h2>
|
||||
<div className="h-96">
|
||||
<TimeSeriesChart data={timeSeriesData} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{stats && (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Conversion Types</h2>
|
||||
<div className="space-y-6">
|
||||
{stats.conversionsByType.map((item, index) => (
|
||||
<div key={index}>
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<div>
|
||||
<span className="text-gray-900 dark:text-gray-100 font-medium">{item.type}</span>
|
||||
<span className="text-gray-500 dark:text-gray-400 text-sm ml-2">
|
||||
{item.count.toLocaleString()} conversions
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<span className="text-gray-900 dark:text-gray-100 font-medium">
|
||||
${item.value.toFixed(2)}
|
||||
</span>
|
||||
<span className="text-gray-500 dark:text-gray-400 text-sm ml-2">
|
||||
({item.percentage.toFixed(1)}%)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
||||
<div
|
||||
className="bg-blue-500 h-2 rounded-full"
|
||||
style={{ width: `${item.percentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -69,16 +69,16 @@ export default function DeviceAnalyticsPage() {
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
|
||||
{/* 设备类型 */}
|
||||
<div className="bg-card-bg rounded-xl p-6">
|
||||
<h3 className="text-lg font-medium text-foreground mb-4">Device Types</h3>
|
||||
<h3 className="text-lg font-medium text-white mb-4">Device Types</h3>
|
||||
{deviceData?.deviceTypes.map(item => (
|
||||
<div key={item.type} className="mb-4 last:mb-0">
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className="text-sm text-foreground">{item.type}</span>
|
||||
<span className="text-sm text-text-secondary">{item.count} ({item.percentage.toFixed(1)}%)</span>
|
||||
<span className="text-sm text-white">{item.type}</span>
|
||||
<span className="text-sm text-white">{item.count} ({item.percentage.toFixed(1)}%)</span>
|
||||
</div>
|
||||
<div className="w-full bg-background rounded-full h-2">
|
||||
<div
|
||||
className="bg-accent-blue h-2 rounded-full"
|
||||
className="bg-blue-500 h-2 rounded-full"
|
||||
style={{ width: `${item.percentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
@@ -88,16 +88,16 @@ export default function DeviceAnalyticsPage() {
|
||||
|
||||
{/* 浏览器 */}
|
||||
<div className="bg-card-bg rounded-xl p-6">
|
||||
<h3 className="text-lg font-medium text-foreground mb-4">Browsers</h3>
|
||||
<h3 className="text-lg font-medium text-white mb-4">Browsers</h3>
|
||||
{deviceData?.browsers.map(item => (
|
||||
<div key={item.name} className="mb-4 last:mb-0">
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className="text-sm text-foreground">{item.name}</span>
|
||||
<span className="text-sm text-text-secondary">{item.count} ({item.percentage.toFixed(1)}%)</span>
|
||||
<span className="text-sm text-white">{item.name}</span>
|
||||
<span className="text-sm text-white">{item.count} ({item.percentage.toFixed(1)}%)</span>
|
||||
</div>
|
||||
<div className="w-full bg-background rounded-full h-2">
|
||||
<div
|
||||
className="bg-accent-green h-2 rounded-full"
|
||||
className="bg-green-500 h-2 rounded-full"
|
||||
style={{ width: `${item.percentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
@@ -107,16 +107,16 @@ export default function DeviceAnalyticsPage() {
|
||||
|
||||
{/* 操作系统 */}
|
||||
<div className="bg-card-bg rounded-xl p-6">
|
||||
<h3 className="text-lg font-medium text-foreground mb-4">Operating Systems</h3>
|
||||
<h3 className="text-lg font-medium text-white mb-4">Operating Systems</h3>
|
||||
{deviceData?.operatingSystems.map(item => (
|
||||
<div key={item.name} className="mb-4 last:mb-0">
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className="text-sm text-foreground">{item.name}</span>
|
||||
<span className="text-sm text-text-secondary">{item.count} ({item.percentage.toFixed(1)}%)</span>
|
||||
<span className="text-sm text-white">{item.name}</span>
|
||||
<span className="text-sm text-white">{item.count} ({item.percentage.toFixed(1)}%)</span>
|
||||
</div>
|
||||
<div className="w-full bg-background rounded-full h-2">
|
||||
<div
|
||||
className="bg-accent-red h-2 rounded-full"
|
||||
className="bg-red-500 h-2 rounded-full"
|
||||
style={{ width: `${item.percentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -37,27 +37,27 @@ export default function GeoAnalyticsPage() {
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
{/* 页面标题 */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl font-bold text-foreground">Geographic Analysis</h1>
|
||||
<p className="mt-2 text-text-secondary">Analyze visitor distribution by location</p>
|
||||
<h1 className="text-2xl font-bold text-white">Geographic Analysis</h1>
|
||||
<p className="mt-2 text-white">Analyze visitor distribution by location</p>
|
||||
</div>
|
||||
|
||||
{/* 时间范围选择器 */}
|
||||
<div className="bg-card-bg rounded-xl p-6 mb-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-text-secondary mb-1">Start Date</label>
|
||||
<label className="block text-sm font-medium text-white mb-1">Start Date</label>
|
||||
<input
|
||||
type="date"
|
||||
className="block w-full px-3 py-2 bg-background border border-card-border rounded-md text-sm"
|
||||
className="block w-full px-3 py-2 bg-background border border-card-border rounded-md text-sm "
|
||||
value={dateRange.from.toISOString().split('T')[0]}
|
||||
onChange={e => setDateRange(prev => ({ ...prev, from: new Date(e.target.value) }))}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-text-secondary mb-1">End Date</label>
|
||||
<label className="block text-sm font-medium text-white mb-1">End Date</label>
|
||||
<input
|
||||
type="date"
|
||||
className="block w-full px-3 py-2 bg-background border border-card-border rounded-md text-sm"
|
||||
className="block w-full px-3 py-2 bg-background border border-card-border rounded-md text-sm "
|
||||
value={dateRange.to.toISOString().split('T')[0]}
|
||||
onChange={e => setDateRange(prev => ({ ...prev, to: new Date(e.target.value) }))}
|
||||
/>
|
||||
@@ -71,33 +71,33 @@ export default function GeoAnalyticsPage() {
|
||||
<table className="min-w-full divide-y divide-card-border">
|
||||
<thead>
|
||||
<tr className="bg-background/50">
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider">Location</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider">Visits</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider">Unique Visitors</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider">Percentage</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Location</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Visits</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Unique Visitors</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Percentage</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-card-border">
|
||||
{geoData.map(item => (
|
||||
<tr key={item.location} className="hover:bg-background/50">
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-white">
|
||||
{item.location}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-white">
|
||||
{item.visits}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-white">
|
||||
{item.visitors}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm">
|
||||
<div className="flex items-center">
|
||||
<div className="w-full bg-background rounded-full h-2 mr-2">
|
||||
<div
|
||||
className="bg-accent-blue h-2 rounded-full"
|
||||
className="bg-blue-500 h-2 rounded-full"
|
||||
style={{ width: `${item.percentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-text-secondary">{item.percentage.toFixed(1)}%</span>
|
||||
<span className="text-white">{item.percentage.toFixed(1)}%</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -122,14 +122,14 @@ export default function GeoAnalyticsPage() {
|
||||
|
||||
{/* 无数据状态 */}
|
||||
{!isLoading && !error && geoData.length === 0 && (
|
||||
<div className="flex justify-center items-center p-8 text-text-secondary">
|
||||
<div className="flex justify-center items-center p-8 text-white">
|
||||
<p>No geographic data available</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 提示信息 */}
|
||||
<div className="mt-4 text-sm text-text-secondary">
|
||||
<div className="mt-4 text-sm text-white">
|
||||
<p>Note: Geographic data is based on IP addresses and may not be 100% accurate.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -52,12 +52,6 @@ export default function RootLayout({
|
||||
>
|
||||
Devices
|
||||
</Link>
|
||||
<Link
|
||||
href="/analytics/conversions"
|
||||
className="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 px-3 py-2 rounded-md text-sm font-medium"
|
||||
>
|
||||
Conversions
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
10
app/page.tsx
10
app/page.tsx
@@ -42,16 +42,6 @@ export default function HomePage() {
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Conversions',
|
||||
description: 'Track conversion rates and analyze the performance of your links.',
|
||||
href: '/analytics/conversions',
|
||||
icon: (
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user