tknuth
/
QR-master
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add analytics dashboard page displaying QR performance metrics, scan trends, device usage, and geographical data.

This commit is contained in:
Timo 2026-01-07 13:04:23 +01:00
parent 2a51e432e8
commit 9573a2eea9
1 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/app/(app)/analytics/page.tsx
View File

@ -31,6 +31,7 @@ import {
Download,
TrendingUp,
QrCode,
HelpCircle,
} from 'lucide-react';
// Dynamically import GeoMap to avoid SSR issues with d3
@ -337,7 +338,7 @@ export default function AnalyticsPage() {
<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>Daily · Weekly · Monthly</span>
<span>{timeRange} Days</span>
</div>
</CardHeader>
<CardContent>
@ -483,7 +484,7 @@ export default function AnalyticsPage() {
</div>
{/* Top Performing QR Codes with Sparklines */}
<Card>
<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" />
@ -492,7 +493,7 @@ export default function AnalyticsPage() {
</CardHeader>
<CardContent>
{(analyticsData?.qrPerformance?.length || 0) > 0 ? (
<div className="overflow-x-auto">
<div className="overflow-x-auto overflow-y-visible">
<Table>
<thead>
<tr className="border-b border-gray-100">
@ -509,7 +510,19 @@ export default function AnalyticsPage() {
Unique Scans
</th>
<th className="h-12 px-4 text-left align-middle font-medium text-gray-500">
Conversions
<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