SEO: Fix structured data validation errors, delete static sitemap, and update indexing scripts

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

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