From 9573a2eea972157f69a6595cce53941f0a21e238 Mon Sep 17 00:00:00 2001
From: Timo <timo@example.com>
Date: Wed, 7 Jan 2026 13:04:23 +0100
Subject: [PATCH] feat: add analytics dashboard page displaying QR performance
 metrics, scan trends, device usage, and geographical data.

---
 src/app/(app)/analytics/page.tsx | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/app/(app)/analytics/page.tsx b/src/app/(app)/analytics/page.tsx
index ba9ff58..61f5710 100644
--- a/src/app/(app)/analytics/page.tsx
+++ b/src/app/(app)/analytics/page.tsx
@@ -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