feat: add subdomain management, comprehensive QR code creation/redirection, and dashboard UI with white-label support.

package-lock.json

@@ -13,9 +13,11 @@
         "@edge-runtime/cookies": "^6.0.0",
         "@prisma/client": "^5.7.0",
         "@stripe/stripe-js": "^8.0.0",
+        "@types/d3-scale": "^4.0.9",
         "bcryptjs": "^2.4.3",
         "chart.js": "^4.4.0",
         "clsx": "^2.0.0",
+        "d3-scale": "^4.0.2",
         "dayjs": "^1.11.10",
         "exceljs": "^4.4.0",
         "file-saver": "^2.0.5",
@@ -35,6 +37,7 @@
         "react-dom": "^18.2.0",
         "react-dropzone": "^14.2.3",
         "react-i18next": "^13.5.0",
+        "react-simple-maps": "^3.0.0",
         "resend": "^6.4.2",
         "sharp": "^0.33.1",
         "stripe": "^19.1.0",
@@ -1931,6 +1934,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
     "node_modules/@types/file-saver": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.7.tgz",
@@ -3652,6 +3670,205 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-2.0.0.tgz",
+      "integrity": "sha512-S/m2VsXI7gAti2pBoLClFFTMOO1HTtT0j99AuXLoGFKO6deHDdnv6ZGTxSTTUTgO1zVcv82fCOtDjYK4EECmWA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-drag": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-2.0.0.tgz",
+      "integrity": "sha512-g9y9WbMnF5uqB9qKqwIIa/921RYWzlUDv9Jl1/yONQwxbOfszAWTCm8u7HOTgJgRDXiRZN56cHT9pd24dmXs8w==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-dispatch": "1 - 2",
+        "d3-selection": "2"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-2.0.0.tgz",
+      "integrity": "sha512-68/n9JWarxXkOWMshcT5IcjbB+agblQUaIsbnXmrzejn2O82n3p2A9R2zEB9HIEFWKFwPAEDDN8gR0VdSAyyAQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-2.0.2.tgz",
+      "integrity": "sha512-8pM1WGMLGFuhq9S+FpPURxic+gKzjluCD/CHTuUF3mXMeiCo0i6R0tO1s4+GArRFde96SLcW/kOFRjoAosPsFA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "^2.5.0"
+      }
+    },
+    "node_modules/d3-geo/node_modules/d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "internmap": "^1.0.0"
+      }
+    },
+    "node_modules/d3-geo/node_modules/internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==",
+      "license": "ISC"
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-2.0.0.tgz",
+      "integrity": "sha512-XoGGqhLUN/W14NmaqcO/bb1nqjDAw5WtSYb2X8wiuQWvSZUsUVYsOSkOybUrNvcBjaywBdYPy03eXHMXjk9nZA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-2.0.0.tgz",
+      "integrity": "sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-transition": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-2.0.0.tgz",
+      "integrity": "sha512-42ltAGgJesfQE3u9LuuBHNbGrI/AJjNL2OAUdclE70UE6Vy239GCBEYD38uBPoLeNsOhFStGpPI0BAOV+HMxog==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-color": "1 - 2",
+        "d3-dispatch": "1 - 2",
+        "d3-ease": "1 - 2",
+        "d3-interpolate": "1 - 2",
+        "d3-timer": "1 - 2"
+      },
+      "peerDependencies": {
+        "d3-selection": "2"
+      }
+    },
+    "node_modules/d3-transition/node_modules/d3-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
+      "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-transition/node_modules/d3-interpolate": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
+      "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-color": "1 - 2"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-2.0.0.tgz",
+      "integrity": "sha512-fFg7aoaEm9/jf+qfstak0IYpnesZLiMX6GZvXtUSdv8RH2o4E2qeelgdU09eKS6wGuiGMfcnMI0nTIqWzRHGpw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-dispatch": "1 - 2",
+        "d3-drag": "2",
+        "d3-interpolate": "1 - 2",
+        "d3-selection": "2",
+        "d3-transition": "2"
+      }
+    },
+    "node_modules/d3-zoom/node_modules/d3-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
+      "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-zoom/node_modules/d3-interpolate": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
+      "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-color": "1 - 2"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -5449,6 +5666,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/ioredis": {
       "version": "5.8.2",
       "resolved": "https://registry.npmjs.org/ioredis/-/ioredis-5.8.2.tgz",
@@ -7504,6 +7730,23 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/react-simple-maps": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/react-simple-maps/-/react-simple-maps-3.0.0.tgz",
+      "integrity": "sha512-vKNFrvpPG8Vyfdjnz5Ne1N56rZlDfHXv5THNXOVZMqbX1rWZA48zQuYT03mx6PAKanqarJu/PDLgshIZAfHHqw==",
+      "license": "MIT",
+      "dependencies": {
+        "d3-geo": "^2.0.2",
+        "d3-selection": "^2.0.0",
+        "d3-zoom": "^2.0.0",
+        "topojson-client": "^3.1.0"
+      },
+      "peerDependencies": {
+        "prop-types": "^15.7.2",
+        "react": "^16.8.0 || 17.x || 18.x",
+        "react-dom": "^16.8.0 || 17.x || 18.x"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -8701,6 +8944,26 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/topojson-client": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/topojson-client/-/topojson-client-3.1.0.tgz",
+      "integrity": "sha512-605uxS6bcYxGXw9qi62XyrV6Q3xwbndjachmNxu8HWTtVPxZfEJN9fd/SZS1Q54Sn2y0TMyMxFj/cJINqGHrKw==",
+      "license": "ISC",
+      "dependencies": {
+        "commander": "2"
+      },
+      "bin": {
+        "topo2geo": "bin/topo2geo",
+        "topomerge": "bin/topomerge",
+        "topoquantize": "bin/topoquantize"
+      }
+    },
+    "node_modules/topojson-client/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "license": "MIT"
+    },
     "node_modules/traverse": {
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz",

package.json

@@ -29,9 +29,11 @@
     "@edge-runtime/cookies": "^6.0.0",
     "@prisma/client": "^5.7.0",
     "@stripe/stripe-js": "^8.0.0",
+    "@types/d3-scale": "^4.0.9",
     "bcryptjs": "^2.4.3",
     "chart.js": "^4.4.0",
     "clsx": "^2.0.0",
+    "d3-scale": "^4.0.2",
     "dayjs": "^1.11.10",
     "exceljs": "^4.4.0",
     "file-saver": "^2.0.5",
@@ -51,6 +53,7 @@
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-i18next": "^13.5.0",
+    "react-simple-maps": "^3.0.0",
     "resend": "^6.4.2",
     "sharp": "^0.33.1",
     "stripe": "^19.1.0",

prisma/schema.prisma

@@ -32,6 +32,9 @@ model User {
   resetPasswordToken   String?   @unique
   resetPasswordExpires DateTime?
 
+  // White-label subdomain
+  subdomain String? @unique
+
   qrCodes       QRCode[]
   integrations  Integration[]
   accounts      Account[]

src/app/(app)/analytics/page.tsx

@@ -1,12 +1,14 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
+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 { Line, Bar, Doughnut } from 'react-chartjs-2';
+import { StatCard, Sparkline } from '@/components/analytics';
+import { Line, Doughnut } from 'react-chartjs-2';
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -20,6 +22,27 @@ import {
   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,
@@ -34,87 +57,102 @@ ChartJS.register(
   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<any>(null);
+  const [analyticsData, setAnalyticsData] = useState<AnalyticsData | null>(null);
 
-  useEffect(() => {
+  const fetchAnalytics = useCallback(async () => {
-    fetchAnalytics();
+    setLoading(true);
-  }, [timeRange]);
-
-  const fetchAnalytics = async () => {
     try {
-      const response = await fetch('/api/analytics/summary');
+      const response = await fetch(`/api/analytics/summary?range=${timeRange}`);
       if (response.ok) {
         const data = await response.json();
         setAnalyticsData(data);
       } else {
-        // Set empty data if not authorized
+        setAnalyticsData(null);
-        setAnalyticsData({
-          summary: {
-            totalScans: 0,
-            uniqueScans: 0,
-            avgScansPerQR: 0,
-            mobilePercentage: 0,
-            topCountry: 'N/A',
-            topCountryPercentage: 0,
-          },
-          deviceStats: {},
-          countryStats: [],
-          dailyScans: {},
-          qrPerformance: [],
-        });
       }
     } catch (error) {
       console.error('Error fetching analytics:', error);
-      setAnalyticsData({
+      setAnalyticsData(null);
-        summary: {
-          totalScans: 0,
-          uniqueScans: 0,
-          avgScansPerQR: 0,
-          mobilePercentage: 0,
-          topCountry: 'N/A',
-          topCountryPercentage: 0,
-        },
-        deviceStats: {},
-        countryStats: [],
-        dailyScans: {},
-        qrPerformance: [],
-      });
     } finally {
       setLoading(false);
     }
-  };
+  }, [timeRange]);
+
+  useEffect(() => {
+    fetchAnalytics();
+  }, [fetchAnalytics]);
 
   const exportReport = () => {
-    // Create CSV data
+    if (!analyticsData) return;
+
     const csvData = [
       ['QR Master Analytics Report'],
       ['Generated:', new Date().toLocaleString()],
+      ['Time Range:', `Last ${timeRange} days`],
       [''],
       ['Summary'],
-      ['Total Scans', analyticsData?.summary.totalScans || 0],
+      ['Total Scans', analyticsData.summary.totalScans],
-      ['Unique Scans', analyticsData?.summary.uniqueScans || 0],
+      ['Unique Scans', analyticsData.summary.uniqueScans],
-      ['Average Scans per QR', analyticsData?.summary.avgScansPerQR || 0],
+      ['Mobile Usage %', analyticsData.summary.mobilePercentage],
-      ['Mobile Usage %', analyticsData?.summary.mobilePercentage || 0],
+      ['Top Country', analyticsData.summary.topCountry],
       [''],
       ['Top QR Codes'],
-      ['Title', 'Type', 'Total Scans', 'Unique Scans', 'Conversion %'],
+      ['Title', 'Type', 'Total Scans', 'Unique Scans', 'Conversion %', 'Last Scanned'],
-      ...(analyticsData?.qrPerformance || []).map((qr: any) => [
+      ...analyticsData.qrPerformance.map((qr) => [
         qr.title,
         qr.type,
         qr.totalScans,
         qr.uniqueScans,
         qr.conversion,
+        qr.lastScanned ? new Date(qr.lastScanned).toLocaleString() : 'Never',
       ]),
     ];
 
-    // Convert to CSV string
+    const csv = csvData.map((row) => row.join(',')).join('\n');
-    const csv = csvData.map(row => row.join(',')).join('\n');
-    
-    // Download
     const blob = new Blob([csv], { type: 'text/csv' });
     const url = URL.createObjectURL(blob);
     const a = document.createElement('a');
@@ -124,7 +162,7 @@ export default function AnalyticsPage() {
     URL.revokeObjectURL(url);
   };
 
-  // Prepare chart data based on selected time range
+  // Prepare chart data
   const daysToShow = parseInt(timeRange);
   const dateRange = Array.from({ length: daysToShow }, (_, i) => {
     const date = new Date();
@@ -133,18 +171,32 @@ export default function AnalyticsPage() {
   });
 
   const scanChartData = {
-    labels: dateRange.map(date => {
+    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),
+        data: dateRange.map((date) => analyticsData?.dailyScans[date] || 0),
-        borderColor: 'rgb(37, 99, 235)',
+        borderColor: 'rgb(59, 130, 246)',
-        backgroundColor: 'rgba(37, 99, 235, 0.1)',
+        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,
       },
     ],
   };
@@ -159,25 +211,34 @@ export default function AnalyticsPage() {
           analyticsData?.deviceStats.tablet || 0,
         ],
         backgroundColor: [
-          'rgba(37, 99, 235, 0.8)',
+          'rgba(59, 130, 246, 0.85)',
-          'rgba(34, 197, 94, 0.8)',
+          'rgba(34, 197, 94, 0.85)',
-          'rgba(249, 115, 22, 0.8)',
+          '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>
+          <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>
+          <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 => (
+            {[1, 2, 3, 4].map((i) => (
-              <div key={i} className="h-32 bg-gray-200 rounded"></div>
+              <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>
     );
@@ -186,117 +247,136 @@ export default function AnalyticsPage() {
   return (
     <div className="space-y-8">
       {/* Header */}
-      <div className="flex items-center justify-between">
+      <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">{t('analytics.title')}</h1>
+          <h1 className="text-3xl font-bold text-gray-900">QR Code Analytics</h1>
-          <p className="text-gray-600 mt-2">{t('analytics.subtitle')}</p>
+          <p className="text-gray-500 mt-1">Track and analyze your QR code performance</p>
-        </div>
-        <Button onClick={exportReport}>Export Report</Button>
         </div>
 
-      {/* Time Range Selector */}
+        <div className="flex items-center gap-3">
-      <div className="flex space-x-2">
+          {/* Date Range Selector */}
-        {['7', '30', '90'].map((days) => (
+          <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={days}
+                key={range.value}
-            onClick={() => setTimeRange(days)}
+                onClick={() => setTimeRange(range.value)}
-            className={`px-4 py-2 rounded-lg font-medium transition-colors ${
+                className={`px-4 py-2 text-sm font-medium rounded-md transition-all ${timeRange === range.value
-              timeRange === days
+                    ? 'bg-white text-gray-900 shadow-sm'
-                ? 'bg-primary-600 text-white'
+                    : 'text-gray-600 hover:text-gray-900'
-                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                   }`}
               >
-            {days} Days
+                {range.label}
               </button>
             ))}
           </div>
 
-      {/* KPI Cards */}
+          <Button onClick={exportReport} variant="primary" className="flex items-center gap-2">
-      <div className="grid md:grid-cols-4 gap-6">
+            <Download className="w-4 h-4" />
-        <Card>
+            Export Report
-          <CardContent className="p-6">
+          </Button>
-            <p className="text-sm text-gray-600 mb-1">Total Scans</p>
+        </div>
-            <p className="text-2xl font-bold text-gray-900">
-              {analyticsData?.summary.totalScans.toLocaleString() || '0'}
-            </p>
-            <p className={`text-sm mt-2 ${
-              analyticsData?.summary.scansTrend?.trend === 'up' ? 'text-green-600' :
-              analyticsData?.summary.scansTrend?.trend === 'down' ? 'text-red-600' :
-              'text-gray-500'
-            }`}>
-              {analyticsData?.summary.scansTrend
-                ? `${analyticsData.summary.scansTrend.isNegative ? '-' : '+'}${analyticsData.summary.scansTrend.percentage}%${analyticsData.summary.scansTrend.isNew ? ' (new)' : ''} from last ${analyticsData.summary.comparisonPeriod || 'period'}`
-                : 'No data'}
-            </p>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardContent className="p-6">
-            <p className="text-sm text-gray-600 mb-1">Avg Scans/QR</p>
-            <p className="text-2xl font-bold text-gray-900">
-              {analyticsData?.summary.avgScansPerQR || '0'}
-            </p>
-            <p className={`text-sm mt-2 ${
-              analyticsData?.summary.avgScansTrend?.trend === 'up' ? 'text-green-600' :
-              analyticsData?.summary.avgScansTrend?.trend === 'down' ? 'text-red-600' :
-              'text-gray-500'
-            }`}>
-              {analyticsData?.summary.avgScansTrend
-                ? `${analyticsData.summary.avgScansTrend.isNegative ? '-' : '+'}${analyticsData.summary.avgScansTrend.percentage}%${analyticsData.summary.avgScansTrend.isNew ? ' (new)' : ''} from last ${analyticsData.summary.comparisonPeriod || 'period'}`
-                : 'No data'}
-            </p>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardContent className="p-6">
-            <p className="text-sm text-gray-600 mb-1">Mobile Usage</p>
-            <p className="text-2xl font-bold text-gray-900">
-              {analyticsData?.summary.mobilePercentage || '0'}%
-            </p>
-            <p className="text-sm mt-2 text-gray-500">
-              {analyticsData?.summary.mobilePercentage > 0 ? 'Of total scans' : 'No mobile scans'}
-            </p>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardContent className="p-6">
-            <p className="text-sm text-gray-600 mb-1">Top Country</p>
-            <p className="text-2xl font-bold text-gray-900">
-              {analyticsData?.summary.topCountry || 'N/A'}
-            </p>
-            <p className="text-sm mt-2 text-gray-500">
-              {analyticsData?.summary.topCountryPercentage || '0'}% of total
-            </p>
-          </CardContent>
-        </Card>
       </div>
 
-      {/* Charts */}
+      {/* KPI Cards */}
-      <div className="grid lg:grid-cols-2 gap-8">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-        {/* Scans Over Time */}
+        <StatCard
-        <Card>
+          title="Total Scans"
-          <CardHeader>
+          value={analyticsData?.summary.totalScans || 0}
-            <CardTitle>Scans Over Time</CardTitle>
+          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-64">
+            <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,
-                      ticks: {
+                      grid: { color: 'rgba(156, 163, 175, 0.1)' },
-                        precision: 0,
+                      ticks: { color: '#9CA3AF', precision: 0 },
-                      },
                     },
                   },
                 }}
@@ -305,122 +385,207 @@ export default function AnalyticsPage() {
           </CardContent>
         </Card>
 
-        {/* Device Types */}
+        {/* Device Types Donut */}
         <Card>
           <CardHeader>
-            <CardTitle>Device Types</CardTitle>
+            <CardTitle className="text-lg font-semibold">Device Types</CardTitle>
           </CardHeader>
           <CardContent>
             <div className="h-64 flex items-center justify-center">
-              {analyticsData?.summary.totalScans > 0 ? (
+              {(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-500">No scan data available</p>
+                <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>Top Countries</CardTitle>
+            <CardTitle className="text-lg font-semibold">Top Countries</CardTitle>
           </CardHeader>
           <CardContent>
-          {analyticsData?.countryStats.length > 0 ? (
+            {(analyticsData?.countryStats?.length || 0) > 0 ? (
-            <Table>
+              <div className="space-y-3">
-              <thead>
+                {analyticsData!.countryStats.slice(0, 5).map((country, index) => (
-                <tr>
+                  <div
-                  <th className="h-12 px-4 text-left align-middle font-medium text-gray-500">Country</th>
+                    key={country.country}
-                  <th className="h-12 px-4 text-left align-middle font-medium text-gray-500">Scans</th>
+                    className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
-                  <th className="h-12 px-4 text-left align-middle font-medium text-gray-500">Percentage</th>
+                  >
-                  <th className="h-12 px-4 text-left align-middle font-medium text-gray-500">Trend</th>
+                    <div className="flex items-center gap-3">
-                </tr>
+                      <span className="text-lg font-semibold text-gray-400 w-6">
-              </thead>
+                        {index + 1}
-              <tbody>
+                      </span>
-                {analyticsData.countryStats.map((country: any, index: number) => (
+                      <span className="font-medium text-gray-900">{country.country}</span>
-                  <tr key={index} className="border-b transition-colors hover:bg-gray-50/50">
+                    </div>
-                    <td className="px-4 py-4 align-middle">{country.country}</td>
+                    <div className="flex items-center gap-4">
-                    <td className="px-4 py-4 align-middle">{country.count.toLocaleString()}</td>
+                      <span className="text-gray-600">{country.count.toLocaleString()}</span>
-                    <td className="px-4 py-4 align-middle">{country.percentage}%</td>
+                      <span className="text-gray-400 text-sm w-12 text-right">
-                    <td className="px-4 py-4 align-middle">
+                        {country.percentage}%
-                      <Badge variant={
+                      </span>
-                        country.trend === 'up' ? 'success' :
+                      <Badge
-                        country.trend === 'down' ? 'error' :
+                        variant={
-                        'default'
+                          country.trend === 'up'
-                      }>
+                            ? 'success'
-                        {country.trend === 'up' ? '↑' : country.trend === 'down' ? '↓' : '→'} {country.trendPercentage}%{country.isNew ? ' (new)' : ''}
+                            : country.trend === 'down'
+                              ? 'error'
+                              : 'default'
+                        }
+                      >
+                        {country.trend === 'up' ? '↑' : country.trend === 'down' ? '↓' : '→'}
+                        {country.trendPercentage}%{country.isNew ? ' (new)' : ''}
                       </Badge>
-                    </td>
+                    </div>
-                  </tr>
+                  </div>
                 ))}
-              </tbody>
+              </div>
-            </Table>
             ) : (
-            <p className="text-gray-500 text-center py-8">No country data available yet</p>
+              <p className="text-gray-400 text-center py-8">No country data available yet</p>
             )}
           </CardContent>
         </Card>
+      </div>
 
-      {/* QR Code Performance Table */}
+      {/* Top Performing QR Codes with Sparklines */}
-      <Card>
+      <Card className="overflow-visible">
-        <CardHeader>
+        <CardHeader className="flex flex-row items-center justify-between">
-          <CardTitle>QR Code Performance</CardTitle>
+          <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 ? (
+          {(analyticsData?.qrPerformance?.length || 0) > 0 ? (
+            <div className="overflow-x-auto overflow-y-visible">
               <Table>
                 <thead>
-                <tr>
+                  <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">
-                  <th className="h-12 px-4 text-left align-middle font-medium text-gray-500">Type</th>
+                      QR Code
-                  <th className="h-12 px-4 text-left align-middle font-medium text-gray-500">Total Scans</th>
+                    </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">
-                  <th className="h-12 px-4 text-left align-middle font-medium text-gray-500">Conversion</th>
+                      Type
-                  <th className="h-12 px-4 text-left align-middle font-medium text-gray-500">Trend</th>
+                    </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: any) => (
+                  {analyticsData!.qrPerformance.map((qr) => (
-                  <tr key={qr.id} className="border-b transition-colors hover:bg-gray-50/50">
+                    <tr
-                    <td className="px-4 py-4 align-middle font-medium">{qr.title}</td>
+                      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">{qr.totalScans.toLocaleString()}</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">
-                      <Badge variant={
+                        <div className="flex items-center gap-3">
-                        qr.trend === 'up' ? 'success' :
+                          <Sparkline
-                        qr.trend === 'down' ? 'error' :
+                            data={qr.sparkline || [0, 0, 0, 0, 0, 0, 0]}
-                        'default'
+                            color={
-                      }>
+                              qr.trend === 'up'
-                        {qr.trend === 'up' ? '↑' : qr.trend === 'down' ? '↓' : '→'} {qr.trendPercentage}%{qr.isNew ? ' (new)' : ''}
+                                ? '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>
           ) : (
-            <p className="text-gray-500 text-center py-8">
+            <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>

src/app/(app)/create/page.tsx

@@ -33,6 +33,11 @@ export default function CreatePage() {
   const [cornerStyle, setCornerStyle] = useState('square');
   const [size, setSize] = useState(200);
 
+  // Logo state (PRO feature)
+  const [logo, setLogo] = useState<string>('');
+  const [logoSize, setLogoSize] = useState(40);
+  const [excavate, setExcavate] = useState(true);
+
   // QR preview
   const [qrDataUrl, setQrDataUrl] = useState('');
 
@@ -167,6 +172,15 @@ export default function CreatePage() {
           backgroundColor: canCustomizeColors ? backgroundColor : '#FFFFFF',
           cornerStyle,
           size,
+          // Logo embedding (PRO only)
+          ...(logo && canCustomizeColors ? {
+            imageSettings: {
+              src: logo,
+              height: logoSize,
+              width: logoSize,
+              excavate: excavate,
+            }
+          } : {}),
         },
       };
 
@@ -488,6 +502,95 @@ export default function CreatePage() {
                 </div>
               </CardContent>
             </Card>
+
+            {/* Logo/Icon Section (PRO Feature) */}
+            <Card>
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <CardTitle>Logo / Icon</CardTitle>
+                  <Badge variant="info">PRO</Badge>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                {!canCustomizeColors ? (
+                  <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
+                    <p className="text-sm text-blue-900">
+                      <strong>Upgrade to PRO</strong> to add your logo or icon to QR codes.
+                    </p>
+                    <Link href="/pricing">
+                      <Button variant="primary" size="sm" className="mt-2">
+                        Upgrade Now
+                      </Button>
+                    </Link>
+                  </div>
+                ) : (
+                  <>
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        Upload Logo (PNG, JPG)
+                      </label>
+                      <input
+                        type="file"
+                        accept="image/png,image/jpeg,image/jpg"
+                        onChange={(e) => {
+                          const file = e.target.files?.[0];
+                          if (file) {
+                            const reader = new FileReader();
+                            reader.onloadend = () => {
+                              setLogo(reader.result as string);
+                            };
+                            reader.readAsDataURL(file);
+                          }
+                        }}
+                        className="w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100"
+                      />
+                    </div>
+
+                    {logo && (
+                      <>
+                        <div className="flex items-center gap-4">
+                          <img src={logo} alt="Logo preview" className="w-12 h-12 object-contain rounded border" />
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => setLogo('')}
+                          >
+                            Remove
+                          </Button>
+                        </div>
+
+                        <div>
+                          <label className="block text-sm font-medium text-gray-700 mb-2">
+                            Logo Size: {logoSize}px
+                          </label>
+                          <input
+                            type="range"
+                            min="24"
+                            max="80"
+                            value={logoSize}
+                            onChange={(e) => setLogoSize(Number(e.target.value))}
+                            className="w-full"
+                          />
+                        </div>
+
+                        <div className="flex items-center gap-2">
+                          <input
+                            type="checkbox"
+                            id="excavate"
+                            checked={excavate}
+                            onChange={(e) => setExcavate(e.target.checked)}
+                            className="w-4 h-4 rounded border-gray-300"
+                          />
+                          <label htmlFor="excavate" className="text-sm text-gray-700">
+                            Clear background behind logo (recommended)
+                          </label>
+                        </div>
+                      </>
+                    )}
+                  </>
+                )}
+              </CardContent>
+            </Card>
           </div>
 
           {/* Right: Preview */}
@@ -505,7 +608,13 @@ export default function CreatePage() {
                         size={200}
                         fgColor={foregroundColor}
                         bgColor={backgroundColor}
-                        level="M"
+                        level={logo && canCustomizeColors ? 'H' : 'M'}
+                        imageSettings={logo && canCustomizeColors ? {
+                          src: logo,
+                          height: logoSize,
+                          width: logoSize,
+                          excavate: excavate,
+                        } : undefined}
                       />
                     </div>
                   ) : (

src/app/(app)/dashboard/page.tsx

@@ -44,6 +44,7 @@ export default function DashboardPage() {
     uniqueScans: 0,
   });
   const [analyticsData, setAnalyticsData] = useState<any>(null);
+  const [userSubdomain, setUserSubdomain] = useState<string | null>(null);
 
   const mockQRCodes = [
     {
@@ -279,6 +280,13 @@ export default function DashboardPage() {
           const analytics = await analyticsResponse.json();
           setAnalyticsData(analytics);
         }
+
+        // Fetch user subdomain for white label display
+        const subdomainResponse = await fetch('/api/user/subdomain');
+        if (subdomainResponse.ok) {
+          const subdomainData = await subdomainResponse.json();
+          setUserSubdomain(subdomainData.subdomain || null);
+        }
       } catch (error) {
         console.error('Error fetching data:', error);
         setQrCodes([]);
@@ -449,10 +457,11 @@ export default function DashboardPage() {
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
             {qrCodes.map((qr) => (
               <QRCodeCard
-                key={qr.id}
+                key={`${qr.id}-${userSubdomain || 'default'}`}
                 qr={qr}
                 onEdit={handleEdit}
                 onDelete={handleDelete}
+                userSubdomain={userSubdomain}
               />
             ))}
           </div>

src/app/(app)/layout.tsx

@@ -161,8 +161,7 @@ export default function AppLayout({
 
       {/* Sidebar */}
       <aside
-        className={`fixed top-0 left-0 z-50 h-full w-64 bg-white border-r border-gray-200 transform transition-transform lg:translate-x-0 ${
+        className={`fixed top-0 left-0 z-50 h-full w-64 bg-white border-r border-gray-200 transform transition-transform lg:translate-x-0 ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'
-          sidebarOpen ? 'translate-x-0' : '-translate-x-full'
           }`}
       >
         <div className="flex items-center justify-between p-4 border-b border-gray-200">
@@ -187,8 +186,7 @@ export default function AppLayout({
               <Link
                 key={item.name}
                 href={item.href}
-                className={`flex items-center space-x-3 px-3 py-2 rounded-lg transition-colors ${
+                className={`flex items-center space-x-3 px-3 py-2 rounded-lg transition-colors ${isActive
-                  isActive
                   ? 'bg-primary-50 text-primary-600'
                   : 'text-gray-700 hover:bg-gray-100'
                   }`}
@@ -249,7 +247,7 @@ export default function AppLayout({
         </main>
 
         {/* Footer */}
-        <Footer />
+        <Footer variant="dashboard" />
       </div>
     </div>
   );

src/app/(app)/settings/page.tsx

@@ -4,11 +4,12 @@ import React, { useState, useEffect } from 'react';
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { Badge } from '@/components/ui/Badge';
+import { Input } from '@/components/ui/Input';
 import { useCsrf } from '@/hooks/useCsrf';
 import { showToast } from '@/components/ui/Toast';
 import ChangePasswordModal from '@/components/settings/ChangePasswordModal';
 
-type TabType = 'profile' | 'subscription';
+type TabType = 'profile' | 'subscription' | 'whitelabel';
 
 export default function SettingsPage() {
   const { fetchWithCsrf } = useCsrf();
@@ -28,6 +29,11 @@ export default function SettingsPage() {
     staticUsed: 0,
   });
 
+  // White Label Subdomain states
+  const [subdomain, setSubdomain] = useState('');
+  const [savedSubdomain, setSavedSubdomain] = useState<string | null>(null);
+  const [subdomainLoading, setSubdomainLoading] = useState(false);
+
   // Load user data
   useEffect(() => {
     const fetchUserData = async () => {
@@ -53,6 +59,14 @@ export default function SettingsPage() {
           const data = await statsResponse.json();
           setUsageStats(data);
         }
+
+        // Fetch subdomain
+        const subdomainResponse = await fetch('/api/user/subdomain');
+        if (subdomainResponse.ok) {
+          const data = await subdomainResponse.json();
+          setSavedSubdomain(data.subdomain);
+          setSubdomain(data.subdomain || '');
+        }
       } catch (e) {
         console.error('Failed to load user data:', e);
       }
@@ -185,8 +199,7 @@ export default function SettingsPage() {
         <nav className="-mb-px flex space-x-8">
           <button
             onClick={() => setActiveTab('profile')}
-            className={`py-4 px-1 border-b-2 font-medium text-sm ${
+            className={`py-4 px-1 border-b-2 font-medium text-sm ${activeTab === 'profile'
-              activeTab === 'profile'
               ? 'border-primary-500 text-primary-600'
               : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
               }`}
@@ -195,14 +208,22 @@ export default function SettingsPage() {
           </button>
           <button
             onClick={() => setActiveTab('subscription')}
-            className={`py-4 px-1 border-b-2 font-medium text-sm ${
+            className={`py-4 px-1 border-b-2 font-medium text-sm ${activeTab === 'subscription'
-              activeTab === 'subscription'
               ? 'border-primary-500 text-primary-600'
               : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
               }`}
           >
             Subscription
           </button>
+          <button
+            onClick={() => setActiveTab('whitelabel')}
+            className={`py-4 px-1 border-b-2 font-medium text-sm ${activeTab === 'whitelabel'
+              ? 'border-primary-500 text-primary-600'
+              : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+              }`}
+          >
+            White Label
+          </button>
         </nav>
       </div>
 
@@ -373,6 +394,143 @@ export default function SettingsPage() {
         </div>
       )}
 
+      {activeTab === 'whitelabel' && (
+        <div className="space-y-6">
+          {/* White Label Subdomain */}
+          <Card>
+            <CardHeader>
+              <div className="flex items-center justify-between">
+                <CardTitle>White Label Subdomain</CardTitle>
+                <Badge variant="success">FREE</Badge>
+              </div>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <p className="text-gray-600 text-sm">
+                Create your own branded QR code URL. Your QR codes will be accessible via your custom subdomain.
+              </p>
+
+              <div className="flex items-center gap-2">
+                <Input
+                  value={subdomain}
+                  onChange={(e) => setSubdomain(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''))}
+                  placeholder="your-brand"
+                  className="flex-1 max-w-xs"
+                />
+                <span className="text-gray-600 font-medium">.qrmaster.net</span>
+              </div>
+
+              <div className="text-sm text-gray-500">
+                <ul className="list-disc list-inside space-y-1">
+                  <li>3-30 characters</li>
+                  <li>Only lowercase letters, numbers, and hyphens</li>
+                  <li>Cannot start or end with a hyphen</li>
+                </ul>
+              </div>
+
+              {savedSubdomain && (
+                <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
+                  <p className="text-green-800 font-medium">
+                    ✅ Your white label URL is active:
+                  </p>
+                  <a
+                    href={`https://${savedSubdomain}.qrmaster.net`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-green-700 underline"
+                  >
+                    https://{savedSubdomain}.qrmaster.net
+                  </a>
+                </div>
+              )}
+
+              <div className="flex gap-3">
+                <Button
+                  onClick={async () => {
+                    if (!subdomain.trim()) {
+                      showToast('Please enter a subdomain', 'error');
+                      return;
+                    }
+                    setSubdomainLoading(true);
+                    try {
+                      const response = await fetchWithCsrf('/api/user/subdomain', {
+                        method: 'POST',
+                        body: JSON.stringify({ subdomain: subdomain.trim().toLowerCase() }),
+                      });
+                      const data = await response.json();
+                      if (response.ok) {
+                        setSavedSubdomain(subdomain.trim().toLowerCase());
+                        showToast('Subdomain saved successfully!', 'success');
+                      } else {
+                        showToast(data.error || 'Error saving subdomain', 'error');
+                      }
+                    } catch (error) {
+                      showToast('Error saving subdomain', 'error');
+                    } finally {
+                      setSubdomainLoading(false);
+                    }
+                  }}
+                  loading={subdomainLoading}
+                  disabled={!subdomain.trim() || subdomain === savedSubdomain}
+                >
+                  {savedSubdomain ? 'Update Subdomain' : 'Save Subdomain'}
+                </Button>
+                {savedSubdomain && (
+                  <Button
+                    variant="outline"
+                    onClick={async () => {
+                      setSubdomainLoading(true);
+                      try {
+                        const response = await fetchWithCsrf('/api/user/subdomain', {
+                          method: 'DELETE',
+                        });
+                        if (response.ok) {
+                          setSavedSubdomain(null);
+                          setSubdomain('');
+                          showToast('Subdomain removed', 'success');
+                        }
+                      } catch (error) {
+                        showToast('Error removing subdomain', 'error');
+                      } finally {
+                        setSubdomainLoading(false);
+                      }
+                    }}
+                    disabled={subdomainLoading}
+                  >
+                    Remove
+                  </Button>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* How it works */}
+          {savedSubdomain && (
+            <Card>
+              <CardHeader>
+                <CardTitle>How it works</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4 text-sm">
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="p-3 bg-gray-100 rounded-lg">
+                      <p className="text-gray-500 mb-1">Before (default)</p>
+                      <code className="text-gray-800">qrmaster.net/r/your-qr</code>
+                    </div>
+                    <div className="p-3 bg-primary-50 rounded-lg border border-primary-200">
+                      <p className="text-primary-600 mb-1">After (your brand)</p>
+                      <code className="text-primary-800">{savedSubdomain}.qrmaster.net/r/your-qr</code>
+                    </div>
+                  </div>
+                  <p className="text-gray-600">
+                    All your QR codes will work with both URLs. Share the branded version with your clients!
+                  </p>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      )}
+
       {/* Change Password Modal */}
       <ChangePasswordModal
         isOpen={showPasswordModal}

src/app/(marketing)/layout.tsx

@@ -150,12 +150,9 @@ export default function MarketingLayout({
           <div className="border-t border-gray-800 mt-8 pt-8 flex items-center justify-between text-gray-400">
             <Link
               href="/newsletter"
-              className="text-xs hover:text-white transition-colors flex items-center gap-1.5 opacity-50 hover:opacity-100"
+              className="text-[6px] text-gray-700 opacity-[0.25] hover:opacity-100 hover:text-white transition-opacity duration-300"
             >
-              <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              •
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-              </svg>
-              Admin
             </Link>
             <p>&copy; 2025 QR Master. All rights reserved.</p>
             <div className="w-12"></div>

src/app/api/analytics/summary/route.ts

@@ -190,6 +190,13 @@ export async function GET(request: NextRequest) {
       return acc;
     }, {} as Record<string, number>);
 
+    // Generate last 7 days for sparkline
+    const last7Days = Array.from({ length: 7 }, (_, i) => {
+      const date = new Date();
+      date.setDate(date.getDate() - (6 - i));
+      return date.toISOString().split('T')[0];
+    });
+
     // QR performance (only show DYNAMIC QR codes since STATIC don't track scans)
     const qrPerformance = qrCodes
       .filter(qr => qr.type === 'DYNAMIC')
@@ -204,6 +211,18 @@ export async function GET(request: NextRequest) {
         // Calculate trend
         const trendData = calculateTrend(currentTotal, previousTotal);
 
+        // Calculate sparkline data (scans per day for last 7 days)
+        const sparklineData = last7Days.map(date => {
+          return qr.scans.filter(s =>
+            new Date(s.ts).toISOString().split('T')[0] === date
+          ).length;
+        });
+
+        // Find last scanned date
+        const lastScanned = qr.scans.length > 0
+          ? new Date(Math.max(...qr.scans.map(s => new Date(s.ts).getTime())))
+          : null;
+
         return {
           id: qr.id,
           title: qr.title,
@@ -215,6 +234,8 @@ export async function GET(request: NextRequest) {
             : 0,
           trend: trendData.trend,
           trendPercentage: trendData.percentage,
+          sparkline: sparklineData,
+          lastScanned: lastScanned?.toISOString() || null,
           ...(trendData.isNew && { isNew: true }),
         };
       })

src/app/api/auth/signup/route.ts

@@ -74,10 +74,8 @@ export async function POST(request: NextRequest) {
       },
     });
 
-    // Set cookie for auto-login after signup
+    // Create response
-    cookies().set('userId', user.id, getAuthCookieOptions());
+    const response = NextResponse.json({
-
-    return NextResponse.json({
       success: true,
       user: {
         id: user.id,
@@ -86,6 +84,11 @@ export async function POST(request: NextRequest) {
         plan: 'FREE',
       },
     });
+
+    // Set cookie for auto-login after signup
+    response.cookies.set('userId', user.id, getAuthCookieOptions());
+
+    return response;
   } catch (error) {
     if (error instanceof z.ZodError) {
       return NextResponse.json(

src/app/api/user/subdomain/route.ts

@@ -0,0 +1,144 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+import { db } from '@/lib/db';
+
+// Reserved subdomains that cannot be used
+const RESERVED_SUBDOMAINS = [
+    'www', 'app', 'api', 'admin', 'mail', 'email',
+    'ftp', 'smtp', 'pop', 'imap', 'dns', 'ns1', 'ns2',
+    'blog', 'shop', 'store', 'help', 'support', 'dashboard',
+    'login', 'signup', 'auth', 'cdn', 'static', 'assets',
+    'dev', 'staging', 'test', 'demo', 'beta', 'alpha'
+];
+
+// Validate subdomain format
+function isValidSubdomain(subdomain: string): { valid: boolean; error?: string } {
+    if (!subdomain) {
+        return { valid: false, error: 'Subdomain is required' };
+    }
+
+    // Must be lowercase
+    if (subdomain !== subdomain.toLowerCase()) {
+        return { valid: false, error: 'Subdomain must be lowercase' };
+    }
+
+    // Length check
+    if (subdomain.length < 3 || subdomain.length > 30) {
+        return { valid: false, error: 'Subdomain must be 3-30 characters' };
+    }
+
+    // Alphanumeric and hyphens only, no leading/trailing hyphens
+    if (!/^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/.test(subdomain)) {
+        return { valid: false, error: 'Only lowercase letters, numbers, and hyphens allowed' };
+    }
+
+    // No consecutive hyphens
+    if (/--/.test(subdomain)) {
+        return { valid: false, error: 'No consecutive hyphens allowed' };
+    }
+
+    // Check reserved
+    if (RESERVED_SUBDOMAINS.includes(subdomain)) {
+        return { valid: false, error: 'This subdomain is reserved' };
+    }
+
+    return { valid: true };
+}
+
+// GET /api/user/subdomain - Get current subdomain
+export async function GET() {
+    try {
+        const userId = cookies().get('userId')?.value;
+        if (!userId) {
+            return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+        }
+
+        const user = await db.user.findUnique({
+            where: { id: userId },
+            select: { subdomain: true },
+        });
+
+        if (!user) {
+            return NextResponse.json({ error: 'User not found' }, { status: 404 });
+        }
+
+        return NextResponse.json({ subdomain: user.subdomain });
+    } catch (error) {
+        console.error('Error fetching subdomain:', error);
+        return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+    }
+}
+
+// POST /api/user/subdomain - Set subdomain
+export async function POST(request: NextRequest) {
+    try {
+        const userId = cookies().get('userId')?.value;
+        if (!userId) {
+            return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+        }
+
+        const body = await request.json();
+        const subdomain = body.subdomain?.trim().toLowerCase();
+
+        // Validate
+        const validation = isValidSubdomain(subdomain);
+        if (!validation.valid) {
+            return NextResponse.json({ error: validation.error }, { status: 400 });
+        }
+
+        // Check if already taken by another user
+        const existing = await db.user.findFirst({
+            where: {
+                subdomain,
+                NOT: { id: userId },
+            },
+        });
+
+        if (existing) {
+            return NextResponse.json({ error: 'This subdomain is already taken' }, { status: 409 });
+        }
+
+        // Update user
+        try {
+            const updatedUser = await db.user.update({
+                where: { id: userId },
+                data: { subdomain },
+                select: { subdomain: true } // Only select needed fields
+            });
+
+            return NextResponse.json({
+                success: true,
+                subdomain: updatedUser.subdomain,
+                url: `https://${updatedUser.subdomain}.qrmaster.net`
+            });
+        } catch (error: any) {
+            if (error.code === 'P2025') {
+                return NextResponse.json({ error: 'User not found' }, { status: 404 });
+            }
+            throw error;
+        }
+    } catch (error) {
+        console.error('Error setting subdomain:', error);
+        return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+    }
+}
+
+// DELETE /api/user/subdomain - Remove subdomain
+export async function DELETE() {
+    try {
+        const userId = cookies().get('userId')?.value;
+        if (!userId) {
+            return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+        }
+
+        await db.user.update({
+            where: { id: userId },
+            data: { subdomain: null },
+        });
+
+        return NextResponse.json({ success: true });
+    } catch (error) {
+        console.error('Error removing subdomain:', error);
+        return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+    }
+}

src/app/r/[slug]/route.ts

@@ -14,8 +14,15 @@ export async function GET(
       where: { slug },
       select: {
         id: true,
+        title: true,
         content: true,
         contentType: true,
+        user: {
+          select: {
+            name: true,
+            subdomain: true,
+          }
+        }
       },
     });
 
@@ -81,8 +88,94 @@ export async function GET(
       destination = `${destination}${separator}${preservedParams.toString()}`;
     }
 
-    // Return 307 redirect (temporary redirect that preserves method)
+    // Construct metadata
-    return NextResponse.redirect(destination, { status: 307 });
+    const siteName = qrCode.user?.subdomain
+      ? `${qrCode.user.subdomain.charAt(0).toUpperCase() + qrCode.user.subdomain.slice(1)}`
+      : 'QR Master';
+
+    const title = qrCode.title || siteName;
+    const description = `Redirecting to content...`;
+
+    // Determine if we should show a preview (bots) or redirect immediately
+    const userAgent = request.headers.get('user-agent') || '';
+    const isBot = /facebookexternalhit|twitterbot|whatsapp|discordbot|telegrambot|slackbot|linkedinbot/i.test(userAgent);
+
+    // HTML response with metadata and redirect
+    const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${title}</title>
+    
+    <!-- Open Graph Metadata -->
+    <meta property="og:title" content="${title}" />
+    <meta property="og:site_name" content="${siteName}" />
+    <meta property="og:description" content="${description}" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="${destination}" />
+    
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:title" content="${title}" />
+    <meta name="twitter:description" content="${description}" />
+
+    <!-- No-cache headers to ensure fresh Redirects -->
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+
+    <!-- Fallback Redirect -->
+    <meta http-equiv="refresh" content="0;url=${JSON.stringify(destination).slice(1, -1)}" />
+
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            background-color: #f9fafb;
+            color: #4b5563;
+        }
+        .loader {
+            text-align: center;
+        }
+        .spinner {
+            border: 3px solid #f3f3f3;
+            border-radius: 50%;
+            border-top: 3px solid #3b82f6;
+            width: 24px;
+            height: 24px;
+            -webkit-animation: spin 1s linear infinite; /* Safari */
+            animation: spin 1s linear infinite;
+            margin: 0 auto 1rem;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
+</head>
+<body>
+    <div class="loader">
+        <div class="spinner"></div>
+        <p>Redirecting to ${siteName}...</p>
+    </div>
+
+    <script>
+        // Immediate redirect
+        window.location.replace("${destination}");
+    </script>
+</body>
+</html>`;
+
+    return new NextResponse(html, {
+      headers: {
+        'Content-Type': 'text/html',
+      },
+    });
   } catch (error) {
     console.error('QR redirect error:', error);
     return new NextResponse('Internal server error', { status: 500 });

src/components/analytics/GeoMap.tsx

@@ -0,0 +1,192 @@
+'use client';
+
+import React, { memo } from 'react';
+import {
+  ComposableMap,
+  Geographies,
+  Geography,
+  ZoomableGroup,
+} from 'react-simple-maps';
+import { scaleLinear } from 'd3-scale';
+
+// TopoJSON world map
+const geoUrl = 'https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json';
+
+// ISO Alpha-2 to country name mapping for common countries
+const countryNameToCode: Record<string, string> = {
+  'United States': 'US',
+  'USA': 'US',
+  'US': 'US',
+  'Germany': 'DE',
+  'DE': 'DE',
+  'United Kingdom': 'GB',
+  'UK': 'GB',
+  'GB': 'GB',
+  'France': 'FR',
+  'FR': 'FR',
+  'Canada': 'CA',
+  'CA': 'CA',
+  'Australia': 'AU',
+  'AU': 'AU',
+  'Japan': 'JP',
+  'JP': 'JP',
+  'China': 'CN',
+  'CN': 'CN',
+  'India': 'IN',
+  'IN': 'IN',
+  'Brazil': 'BR',
+  'BR': 'BR',
+  'Spain': 'ES',
+  'ES': 'ES',
+  'Italy': 'IT',
+  'IT': 'IT',
+  'Netherlands': 'NL',
+  'NL': 'NL',
+  'Switzerland': 'CH',
+  'CH': 'CH',
+  'Austria': 'AT',
+  'AT': 'AT',
+  'Poland': 'PL',
+  'PL': 'PL',
+  'Sweden': 'SE',
+  'SE': 'SE',
+  'Norway': 'NO',
+  'NO': 'NO',
+  'Denmark': 'DK',
+  'DK': 'DK',
+  'Finland': 'FI',
+  'FI': 'FI',
+  'Belgium': 'BE',
+  'BE': 'BE',
+  'Portugal': 'PT',
+  'PT': 'PT',
+  'Ireland': 'IE',
+  'IE': 'IE',
+  'Mexico': 'MX',
+  'MX': 'MX',
+  'Argentina': 'AR',
+  'AR': 'AR',
+  'South Korea': 'KR',
+  'KR': 'KR',
+  'Singapore': 'SG',
+  'SG': 'SG',
+  'New Zealand': 'NZ',
+  'NZ': 'NZ',
+  'Russia': 'RU',
+  'RU': 'RU',
+  'South Africa': 'ZA',
+  'ZA': 'ZA',
+  'Unknown Location': 'UNKNOWN',
+  'unknown': 'UNKNOWN',
+};
+
+// ISO Alpha-2 to ISO Alpha-3 mapping (for matching with TopoJSON)
+const alpha2ToAlpha3: Record<string, string> = {
+  'US': 'USA',
+  'DE': 'DEU',
+  'GB': 'GBR',
+  'FR': 'FRA',
+  'CA': 'CAN',
+  'AU': 'AUS',
+  'JP': 'JPN',
+  'CN': 'CHN',
+  'IN': 'IND',
+  'BR': 'BRA',
+  'ES': 'ESP',
+  'IT': 'ITA',
+  'NL': 'NLD',
+  'CH': 'CHE',
+  'AT': 'AUT',
+  'PL': 'POL',
+  'SE': 'SWE',
+  'NO': 'NOR',
+  'DK': 'DNK',
+  'FI': 'FIN',
+  'BE': 'BEL',
+  'PT': 'PRT',
+  'IE': 'IRL',
+  'MX': 'MEX',
+  'AR': 'ARG',
+  'KR': 'KOR',
+  'SG': 'SGP',
+  'NZ': 'NZL',
+  'RU': 'RUS',
+  'ZA': 'ZAF',
+};
+
+interface CountryStat {
+  country: string;
+  count: number;
+  percentage: number;
+}
+
+interface GeoMapProps {
+  countryStats: CountryStat[];
+  totalScans: number;
+}
+
+const GeoMap: React.FC<GeoMapProps> = ({ countryStats, totalScans }) => {
+  // Build a map of ISO Alpha-3 codes to scan counts
+  const countryData: Record<string, number> = {};
+  let maxCount = 0;
+
+  countryStats.forEach((stat) => {
+    const alpha2 = countryNameToCode[stat.country] || stat.country;
+    const alpha3 = alpha2ToAlpha3[alpha2];
+    if (alpha3) {
+      countryData[alpha3] = stat.count;
+      if (stat.count > maxCount) maxCount = stat.count;
+    }
+  });
+
+  // Color scale: light blue to dark blue based on scan count
+  const colorScale = scaleLinear<string>()
+    .domain([0, maxCount || 1])
+    .range(['#E0F2FE', '#1E40AF']);
+
+  return (
+    <div className="w-full h-full">
+      <ComposableMap
+        projection="geoMercator"
+        projectionConfig={{
+          scale: 120,
+          center: [0, 30],
+        }}
+        style={{ width: '100%', height: '100%' }}
+      >
+        <ZoomableGroup center={[0, 30]} zoom={1}>
+          <Geographies geography={geoUrl}>
+            {({ geographies }) =>
+              geographies.map((geo) => {
+                const isoCode = geo.properties.ISO_A3 || geo.id;
+                const scanCount = countryData[isoCode] || 0;
+                const fillColor = scanCount > 0 ? colorScale(scanCount) : '#F1F5F9';
+
+                return (
+                  <Geography
+                    key={geo.rsmKey}
+                    geography={geo}
+                    fill={fillColor}
+                    stroke="#CBD5E1"
+                    strokeWidth={0.5}
+                    style={{
+                      default: { outline: 'none' },
+                      hover: {
+                        fill: scanCount > 0 ? '#3B82F6' : '#E2E8F0',
+                        outline: 'none',
+                        cursor: 'pointer',
+                      },
+                      pressed: { outline: 'none' },
+                    }}
+                  />
+                );
+              })
+            }
+          </Geographies>
+        </ZoomableGroup>
+      </ComposableMap>
+    </div>
+  );
+};
+
+export default memo(GeoMap);

src/components/analytics/Sparkline.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import React from 'react';
+import { Line } from 'react-chartjs-2';
+import {
+    Chart as ChartJS,
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    Filler,
+} from 'chart.js';
+
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Filler);
+
+interface SparklineProps {
+    data: number[];
+    color?: 'blue' | 'green' | 'red';
+    width?: number;
+    height?: number;
+}
+
+const colorMap = {
+    blue: {
+        border: 'rgb(59, 130, 246)',
+        background: 'rgba(59, 130, 246, 0.1)',
+    },
+    green: {
+        border: 'rgb(34, 197, 94)',
+        background: 'rgba(34, 197, 94, 0.1)',
+    },
+    red: {
+        border: 'rgb(239, 68, 68)',
+        background: 'rgba(239, 68, 68, 0.1)',
+    },
+};
+
+const Sparkline: React.FC<SparklineProps> = ({
+    data,
+    color = 'blue',
+    width = 100,
+    height = 30,
+}) => {
+    const colors = colorMap[color];
+
+    const chartData = {
+        labels: data.map((_, i) => i.toString()),
+        datasets: [
+            {
+                data,
+                borderColor: colors.border,
+                backgroundColor: colors.background,
+                borderWidth: 1.5,
+                pointRadius: 0,
+                tension: 0.4,
+                fill: true,
+            },
+        ],
+    };
+
+    const options = {
+        responsive: false,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: { display: false },
+            tooltip: { enabled: false },
+        },
+        scales: {
+            x: { display: false },
+            y: { display: false },
+        },
+        elements: {
+            line: {
+                borderJoinStyle: 'round' as const,
+            },
+        },
+    };
+
+    return (
+        <div style={{ width, height }}>
+            <Line data={chartData} options={options} width={width} height={height} />
+        </div>
+    );
+};
+
+export default Sparkline;

src/components/analytics/StatCard.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import React from 'react';
+import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
+
+interface StatCardProps {
+    title: string;
+    value: string | number;
+    subtitle?: string;
+    trend?: {
+        direction: 'up' | 'down' | 'flat';
+        percentage: number;
+        isNew?: boolean;
+        period?: string;
+    };
+    icon?: React.ReactNode;
+    variant?: 'default' | 'highlight';
+}
+
+const StatCard: React.FC<StatCardProps> = ({
+    title,
+    value,
+    subtitle,
+    trend,
+    icon,
+    variant = 'default',
+}) => {
+    const getTrendColor = () => {
+        if (!trend) return 'text-gray-500';
+        if (trend.direction === 'up') return 'text-emerald-600';
+        if (trend.direction === 'down') return 'text-red-500';
+        return 'text-gray-500';
+    };
+
+    const getTrendIcon = () => {
+        if (!trend) return null;
+        if (trend.direction === 'up') return <TrendingUp className="w-4 h-4" />;
+        if (trend.direction === 'down') return <TrendingDown className="w-4 h-4" />;
+        return <Minus className="w-4 h-4" />;
+    };
+
+    return (
+        <div
+            className={`rounded-xl p-6 transition-all duration-200 ${variant === 'highlight'
+                    ? 'bg-gradient-to-br from-primary-500 to-primary-600 text-white shadow-lg shadow-primary-500/25'
+                    : 'bg-white border border-gray-200 hover:shadow-md'
+                }`}
+        >
+            <div className="flex items-start justify-between">
+                <div className="flex-1">
+                    <p
+                        className={`text-sm font-medium ${variant === 'highlight' ? 'text-primary-100' : 'text-gray-500'
+                            }`}
+                    >
+                        {title}
+                    </p>
+                    <p
+                        className={`text-3xl font-bold mt-2 ${variant === 'highlight' ? 'text-white' : 'text-gray-900'
+                            }`}
+                    >
+                        {typeof value === 'number' ? value.toLocaleString() : value}
+                    </p>
+                    {trend && (
+                        <div className={`flex items-center gap-1 mt-3 ${getTrendColor()}`}>
+                            {getTrendIcon()}
+                            <span className="text-sm font-medium">
+                                {trend.direction === 'up' ? '+' : trend.direction === 'down' ? '-' : ''}
+                                {trend.percentage}%
+                                {trend.isNew && ' (new)'}
+                            </span>
+                            {trend.period && (
+                                <span
+                                    className={`text-sm ${variant === 'highlight' ? 'text-primary-200' : 'text-gray-400'
+                                        }`}
+                                >
+                                    vs last {trend.period}
+                                </span>
+                            )}
+                        </div>
+                    )}
+                    {subtitle && !trend && (
+                        <p
+                            className={`text-sm mt-2 ${variant === 'highlight' ? 'text-primary-200' : 'text-gray-500'
+                                }`}
+                        >
+                            {subtitle}
+                        </p>
+                    )}
+                </div>
+                {icon && (
+                    <div
+                        className={`p-3 rounded-lg ${variant === 'highlight' ? 'bg-white/20' : 'bg-gray-100'
+                            }`}
+                    >
+                        {icon}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default StatCard;

src/components/analytics/index.ts

@@ -0,0 +1,3 @@
+export { default as GeoMap } from './GeoMap';
+export { default as Sparkline } from './Sparkline';
+export { default as StatCard } from './StatCard';

src/components/dashboard/QRCodeCard.tsx

@@ -21,17 +21,25 @@ interface QRCodeCardProps {
   };
   onEdit: (id: string) => void;
   onDelete: (id: string) => void;
+  userSubdomain?: string | null;
 }
 
 export const QRCodeCard: React.FC<QRCodeCardProps> = ({
   qr,
   onEdit,
   onDelete,
+  userSubdomain,
 }) => {
   // For dynamic QR codes, use the redirect URL for tracking
   // For static QR codes, use the direct URL from content
   const baseUrl = process.env.NEXT_PUBLIC_APP_URL || (typeof window !== 'undefined' ? window.location.origin : 'http://localhost:3050');
 
+  // White label: use subdomain URL if available
+  const mainDomain = process.env.NEXT_PUBLIC_MAIN_DOMAIN || 'qrmaster.net';
+  const brandedBaseUrl = userSubdomain
+    ? `https://${userSubdomain}.${mainDomain}`
+    : baseUrl;
+
   // Get the QR URL based on type
   let qrUrl = '';
 
@@ -65,15 +73,17 @@ END:VCARD`;
       qrUrl = qr.content.qrContent;
     } else {
       // Last resort fallback
-      qrUrl = `${baseUrl}/r/${qr.slug}`;
+      qrUrl = `${brandedBaseUrl}/r/${qr.slug}`;
     }
     console.log(`STATIC QR [${qr.title}]: ${qrUrl}`);
   } else {
-    // DYNAMIC QR codes always use redirect for tracking
+    // DYNAMIC QR codes use branded URL for white label
-    qrUrl = `${baseUrl}/r/${qr.slug}`;
+    qrUrl = `${brandedBaseUrl}/r/${qr.slug}`;
-    console.log(`DYNAMIC QR [${qr.title}]: ${qrUrl}`);
   }
 
+  // Display URL (same as qrUrl for consistency)
+  const displayUrl = qrUrl;
+
   const downloadQR = (format: 'png' | 'svg') => {
     const svg = document.querySelector(`#qr-${qr.id} svg`);
     if (!svg) return;
@@ -196,11 +206,13 @@ END:VCARD`;
         <div id={`qr-${qr.id}`} className="flex items-center justify-center bg-gray-50 rounded-lg p-4 mb-3">
           <div className={qr.style?.cornerStyle === 'rounded' ? 'rounded-lg overflow-hidden' : ''}>
             <QRCodeSVG
+              key={qrUrl}
               value={qrUrl}
               size={96}
               fgColor={qr.style?.foregroundColor || '#000000'}
               bgColor={qr.style?.backgroundColor || '#FFFFFF'}
-              level="M"
+              level={qr.style?.imageSettings ? 'H' : 'M'}
+              imageSettings={qr.style?.imageSettings}
             />
           </div>
         </div>
@@ -216,6 +228,11 @@ END:VCARD`;
               <span className="text-gray-900">{qr.scans || 0}</span>
             </div>
           )}
+          {qr.type === 'DYNAMIC' && (
+            <div className="text-xs text-gray-400 break-all bg-gray-50 p-1 rounded border border-gray-100 mt-2">
+              {qrUrl}
+            </div>
+          )}
           <div className="flex items-center justify-between">
             <span className="text-gray-500">Created:</span>
             <span className="text-gray-900">{formatDate(qr.createdAt)}</span>
@@ -223,7 +240,7 @@ END:VCARD`;
           {qr.type === 'DYNAMIC' && (
             <div className="pt-2 border-t">
               <p className="text-xs text-gray-500">
-                📊 Dynamic QR: Tracks scans via {baseUrl}/r/{qr.slug}
+                📊 Dynamic QR: Tracks scans via {displayUrl}
               </p>
             </div>
           )}

src/components/ui/Footer.tsx

@@ -1,59 +1,66 @@
 import Link from 'next/link';
 
-export function Footer() {
+interface FooterProps {
+  variant?: 'marketing' | 'dashboard';
+}
+
+export function Footer({ variant = 'marketing' }: FooterProps) {
+  const isDashboard = variant === 'dashboard';
+
   return (
-    <footer className="bg-gray-900 text-white py-12 mt-20">
+    <footer className={`${isDashboard ? 'bg-gray-50 text-gray-600 border-t border-gray-200 mt-12' : 'bg-gray-900 text-white mt-20'} py-12`}>
       <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
         <div className="grid md:grid-cols-4 gap-8">
           <div>
             <Link href="/" className="flex items-center space-x-2 mb-4 hover:opacity-80 transition-opacity">
               <img src="/logo.svg" alt="QR Master" className="w-10 h-10" />
-              <span className="text-xl font-bold">QR Master</span>
+              <span className={`text-xl font-bold ${isDashboard ? 'text-gray-900' : ''}`}>QR Master</span>
             </Link>
-            <p className="text-gray-400">
+            <p className={isDashboard ? 'text-gray-500' : 'text-gray-400'}>
               Create custom QR codes in seconds with advanced tracking and analytics.
             </p>
           </div>
 
           <div>
-            <h3 className="font-semibold mb-4">Product</h3>
+            <h3 className={`font-semibold mb-4 ${isDashboard ? 'text-gray-900' : ''}`}>Product</h3>
-            <ul className="space-y-2 text-gray-400">
+            <ul className={`space-y-2 ${isDashboard ? 'text-gray-500' : 'text-gray-400'}`}>
-              <li><Link href="/#features" className="hover:text-white">Features</Link></li>
+              <li><Link href="/#features" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Features</Link></li>
-              <li><Link href="/#pricing" className="hover:text-white">Pricing</Link></li>
+              <li><Link href="/#pricing" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Pricing</Link></li>
-              <li><Link href="/#faq" className="hover:text-white">FAQ</Link></li>
+              <li><Link href="/#faq" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>FAQ</Link></li>
-              <li><Link href="/blog" className="hover:text-white">Blog</Link></li>
+              <li><Link href="/blog" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Blog</Link></li>
             </ul>
           </div>
 
           <div>
-            <h3 className="font-semibold mb-4">Resources</h3>
+            <h3 className={`font-semibold mb-4 ${isDashboard ? 'text-gray-900' : ''}`}>Resources</h3>
-            <ul className="space-y-2 text-gray-400">
+            <ul className={`space-y-2 ${isDashboard ? 'text-gray-500' : 'text-gray-400'}`}>
-              <li><Link href="/pricing" className="hover:text-white">Full Pricing</Link></li>
+              <li><Link href="/pricing" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Full Pricing</Link></li>
-              <li><Link href="/faq" className="hover:text-white">All Questions</Link></li>
+              <li><Link href="/faq" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>All Questions</Link></li>
-              <li><Link href="/blog" className="hover:text-white">Blog</Link></li>
+              <li><Link href="/blog" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Blog</Link></li>
-              <li><Link href="/signup" className="hover:text-white">Get Started</Link></li>
+              <li><Link href="/signup" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Get Started</Link></li>
             </ul>
           </div>
 
           <div>
-            <h3 className="font-semibold mb-4">Legal</h3>
+            <h3 className={`font-semibold mb-4 ${isDashboard ? 'text-gray-900' : ''}`}>Legal</h3>
-            <ul className="space-y-2 text-gray-400">
+            <ul className={`space-y-2 ${isDashboard ? 'text-gray-500' : 'text-gray-400'}`}>
-              <li><Link href="/privacy" className="hover:text-white">Privacy Policy</Link></li>
+              <li><Link href="/privacy" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Privacy Policy</Link></li>
             </ul>
           </div>
 
         </div>
 
-        <div className="border-t border-gray-800 mt-8 pt-8 flex items-center justify-between text-gray-400">
+        <div className={`border-t mt-8 pt-8 flex items-center justify-between ${isDashboard ? 'border-gray-200 text-gray-500' : 'border-gray-800 text-gray-400'}`}>
+          {!isDashboard ? (
             <Link
               href="/newsletter"
-            className="text-xs hover:text-white transition-colors flex items-center gap-1.5 opacity-50 hover:opacity-100"
+              className="text-[6px] text-gray-700 opacity-[0.03] hover:opacity-100 hover:text-white transition-opacity duration-300"
             >
-            <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              •
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-            </svg>
-            Admin
             </Link>
+          ) : (
+            <div></div>
+          )}
           <p>&copy; 2025 QR Master. All rights reserved.</p>
           <div className="w-12"></div>
         </div>

src/middleware.ts

@@ -24,6 +24,28 @@ export function middleware(req: NextRequest) {
     return NextResponse.next();
   }
 
+  // Handle White Label Subdomains
+  // Check if this is a subdomain request (e.g., kunde.qrmaster.de)
+  const host = req.headers.get('host') || '';
+  const isLocalhost = host.includes('localhost') || host.includes('127.0.0.1');
+  const mainDomain = process.env.NEXT_PUBLIC_MAIN_DOMAIN || 'qrmaster.net';
+
+  // Extract subdomain if present (e.g., "kunde" from "kunde.qrmaster.de")
+  let subdomain: string | null = null;
+  if (!isLocalhost && host.endsWith(mainDomain) && host !== mainDomain && host !== `www.${mainDomain}`) {
+    const parts = host.replace(`.${mainDomain}`, '').split('.');
+    if (parts.length === 1 && parts[0]) {
+      subdomain = parts[0];
+    }
+  }
+
+  // For subdomain requests to /r/*, pass subdomain info via header
+  if (subdomain && path.startsWith('/r/')) {
+    const response = NextResponse.next();
+    response.headers.set('x-subdomain', subdomain);
+    return response;
+  }
+
   // Allow redirect routes (QR code redirects)
   if (path.startsWith('/r/')) {
     return NextResponse.next();

src/types/react-simple-maps.d.ts

@@ -0,0 +1,58 @@
+declare module 'react-simple-maps' {
+    import { ComponentType, ReactNode, CSSProperties } from 'react';
+
+    export interface ComposableMapProps {
+        projection?: string;
+        projectionConfig?: {
+            scale?: number;
+            center?: [number, number];
+            rotate?: [number, number, number];
+        };
+        width?: number;
+        height?: number;
+        style?: CSSProperties;
+        children?: ReactNode;
+    }
+
+    export interface GeographiesProps {
+        geography: string | object;
+        children: (data: { geographies: any[] }) => ReactNode;
+    }
+
+    export interface GeographyProps {
+        geography: any;
+        style?: {
+            default?: CSSProperties;
+            hover?: CSSProperties;
+            pressed?: CSSProperties;
+        };
+        fill?: string;
+        stroke?: string;
+        strokeWidth?: number;
+        onClick?: (event: React.MouseEvent) => void;
+        onMouseEnter?: (event: React.MouseEvent) => void;
+        onMouseLeave?: (event: React.MouseEvent) => void;
+    }
+
+    export interface ZoomableGroupProps {
+        center?: [number, number];
+        zoom?: number;
+        minZoom?: number;
+        maxZoom?: number;
+        translateExtent?: [[number, number], [number, number]];
+        onMoveStart?: (event: any) => void;
+        onMove?: (event: any) => void;
+        onMoveEnd?: (event: any) => void;
+        children?: ReactNode;
+    }
+
+    export const ComposableMap: ComponentType<ComposableMapProps>;
+    export const Geographies: ComponentType<GeographiesProps>;
+    export const Geography: ComponentType<GeographyProps>;
+    export const ZoomableGroup: ComponentType<ZoomableGroupProps>;
+    export const Marker: ComponentType<any>;
+    export const Line: ComponentType<any>;
+    export const Annotation: ComponentType<any>;
+    export const Graticule: ComponentType<any>;
+    export const Sphere: ComponentType<any>;
+}