import { Suspense, useEffect } from 'react'; import { Head, router } from '@inertiajs/react'; import CountryTable from '@/Components/Geographic/CountryTable'; import SiteNav from '@/Components/Navigation/SiteNav'; import { LazyCountryMap } from '@/Components/ui/charts/LazyCharts'; import { EmptyState } from '@/Components/ui/empty-state'; import { Skeleton } from '@/Components/ui/skeleton'; import DashboardLayout from '@/Layouts/DashboardLayout'; import { trackEvent } from '@/lib/analytics'; import { GEOGRAPHIC_ANALYSIS_VIEWED } from '@/lib/event-catalog'; // Loading fallback for charts const ChartLoader = () => (

); interface CountryData { country: string; clicks: number; impressions: number; ctr: number; position: number; clicksTrend?: number; } interface Props { site: { id: number; name: string; domain: string; }; countries: CountryData[]; } export default function GeographicIndex({ site, countries }: Props) { useEffect(() => { trackEvent(GEOGRAPHIC_ANALYSIS_VIEWED, { site_id: String(site.id) }); }, [site.id]); const handleCountryClick = (country: string) => { router.visit( route('geographic.detail', { site: site.id, country: country, }), ); }; return ( <>

Geographic Performance

Traffic metrics by country showing where your audience is located

{countries.length === 0 ? (

) : (

Country Heatmap

)}

); } GeographicIndex.layout = (page: React.ReactNode) => {page};