Loading analytics...

Gathering insights from user interactions

\n );\n }\n\n if (error) {\n return (\n

📊

Analytics Unavailable

{error}

\n \n Retry\n \n

\n );\n }\n\n return (\n

\n {/* Header */}\n

\n 📊 Analytics Dashboard\n {isAdmin && (\n \n Admin View\n \n )}\n

\n Track user engagement and tour performance\n

\n\n {!isAdmin && (\n \n ← Back to Tours\n \n )}\n

\n\n {/* Period Selector */}\n

Time Period

\n {[7, 30, 90].map((days) => (\n setSelectedPeriod(days)}\n className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${\n selectedPeriod === days\n ? 'bg-blue-600 text-white'\n : 'bg-gray-100 text-gray-700 hover:bg-gray-200'\n }`}\n >\n Last {days} days\n \n ))}\n

\n\n {/* Tab Navigation */}\n

\n setActiveTab('overview')}\n className={`px-6 py-4 text-sm font-medium border-b-2 transition-colors ${\n activeTab === 'overview'\n ? 'border-blue-500 text-blue-600'\n : 'border-transparent text-gray-500 hover:text-gray-700'\n }`}\n >\n 📈 Overview\n \n setActiveTab('detailed')}\n className={`px-6 py-4 text-sm font-medium border-b-2 transition-colors ${\n activeTab === 'detailed'\n ? 'border-blue-500 text-blue-600'\n : 'border-transparent text-gray-500 hover:text-gray-700'\n }`}\n >\n 🔍 Detailed Analysis\n \n setActiveTab('export')}\n className={`px-6 py-4 text-sm font-medium border-b-2 transition-colors ${\n activeTab === 'export'\n ? 'border-blue-500 text-blue-600'\n : 'border-transparent text-gray-500 hover:text-gray-700'\n }`}\n >\n 📤 Export Data\n \n

\n\n

\n {activeTab === 'overview' && dashboardStats && analyticsData && (\n \n )}\n\n {activeTab === 'detailed' && analyticsData && (\n \n )}\n\n {activeTab === 'export' && (\n \n )}\n

\n );\n}\n\n// Overview Tab Component\ninterface OverviewTabProps {\n dashboardStats: DashboardStats;\n analyticsData: AnalyticsData;\n selectedPeriod: number;\n}\n\nfunction OverviewTab({ dashboardStats, analyticsData, selectedPeriod }: OverviewTabProps) {\n return (\n

\n {/* Key Metrics */}\n

Key Metrics

\n \n \n \n \n

\n\n {/* Period Comparison */}\n

Period Comparison

\n \n \n \n

\n\n {/* Popular Content */}\n

Popular Cities

\n {analyticsData.popularCities.slice(0, 5).map((city, index) => (\n

\n #{index + 1}\n {city.cityName}\n

\n {city.visits} visits\n

\n ))}\n

\n\n

Popular Stops

\n {analyticsData.popularStops.slice(0, 5).map((stop, index) => (\n

{stop.stopTitle}

{stop.cityName}

\n {stop.views} views\n

\n ))}\n

\n );\n}\n\n// Detailed Tab Component\ninterface DetailedTabProps {\n analyticsData: AnalyticsData;\n selectedPeriod: number;\n}\n\nfunction DetailedTab({ analyticsData, selectedPeriod }: DetailedTabProps) {\n return (\n

\n {/* User Engagement */}\n

User Engagement

\n {Math.round(analyticsData.userEngagement.averageSessionDuration / 60)}m\n

Avg Session Duration

\n {analyticsData.userEngagement.averageStopsPerTour.toFixed(1)}\n

Avg Stops per Tour

\n {analyticsData.userEngagement.mostViewedContent}\n

Activity Over Time

\n {analyticsData.timeSeriesData.slice(0, 10).map((data, index) => (\n

\n {data.date}\n

\n \n {data.sessions} sessions\n \n \n {data.tours} tours\n \n

\n ))}\n

\n\n {/* All Cities Performance */}\n

All Cities Performance

\n \n \n \n \n \n \n \n \n \n \n {analyticsData.popularCities.map((city, index) => {\n const totalVisits = analyticsData.popularCities.reduce((sum, c) => sum + c.visits, 0);\n const share = totalVisits > 0 ? (city.visits / totalVisits) * 100 : 0;\n \n return (\n \n \n \n \n \n \n );\n })}\n \n

Rank	City	Visits	Share
#{index + 1}	{city.cityName}	{city.visits}	{share.toFixed(1)}%

\n );\n}\n\n// Export Tab Component\ninterface ExportTabProps {\n onExport: (format: 'json' | 'csv') => void;\n selectedPeriod: number;\n}\n\nfunction ExportTab({ onExport, selectedPeriod }: ExportTabProps) {\n return (\n

Export Analytics Data

\n Download analytics data for the last {selectedPeriod} days in your preferred format.\n

\n\n

📊

JSON Format

\n Complete analytics data in JSON format, perfect for further analysis or integration.\n

\n onExport('json')}\n className=\"w-full bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors\"\n >\n Download JSON\n \n

\n\n

📈

CSV Format

\n City popularity data in CSV format, ideal for spreadsheet analysis and reporting.\n

\n onExport('csv')}\n className=\"w-full bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors\"\n >\n Download CSV\n \n

\n\n

\n ⚠️\n

Data Privacy Notice

\n Exported data contains aggregated analytics only. No personal user information is included.\n

\n );\n}\n\n// Helper Components\ninterface MetricCardProps {\n title: string;\n value: string | number;\n icon: string;\n color: 'blue' | 'green' | 'purple' | 'orange';\n}\n\nfunction MetricCard({ title, value, icon, color }: MetricCardProps) {\n const colorClasses = {\n blue: 'bg-blue-50 text-blue-600',\n green: 'bg-green-50 text-green-600',\n purple: 'bg-purple-50 text-purple-600',\n orange: 'bg-orange-50 text-orange-600'\n };\n\n return (\n

{title}

{value}

\n {icon}\n

\n );\n}\n\ninterface PeriodCardProps {\n title: string;\n sessions: number;\n tours: number;\n newUsers: number;\n}\n\nfunction PeriodCard({ title, sessions, tours, newUsers }: PeriodCardProps) {\n return (\n

{title}

\n Sessions\n {sessions}\n

\n Tours\n {tours}\n

\n New Users\n {newUsers}\n

\n );\n}","deleted","label",[169,170,152],"frontend","components","permalink","https://www.val.town/x/Onesidededdimple/VirtualTourGuide/code/frontend/components/Analytics.tsx","extension","actionData","errors"]