import { ArrowLeft } from 'lucide-react'; import { Head, Link } from '@inertiajs/react'; import SiteNav from '@/Components/Navigation/SiteNav'; import { Button } from '@/Components/ui/button'; import DashboardLayout from '@/Layouts/DashboardLayout'; import { formatNumber, formatPercent } from '@/lib/format'; interface PageData { page: string; clicks: number; impressions: number; ctr: number; position: number; } interface QueryData { query: string; clicks: number; impressions: number; ctr: number; position: number; } interface Props { site: { id: number; name: string; domain: string; }; country: string; pages: PageData[]; queries: QueryData[]; } export default function GeographicDetail({ site, country, pages, queries }: Props) { return ( <>

{country} Performance

Detailed breakdown of pages and queries driving traffic from {country}

{/* Top Pages Section */}

Top Pages

{pages.length === 0 ? (

No page data available

) : (

{pages.map((page, index) => ( ))}

Page	Clicks	Impressions	CTR	Position
{page.page}	{formatNumber(page.clicks)}	{formatNumber(page.impressions)}	{formatPercent(page.ctr, 2)}	{page.position.toFixed(2)}

)}

{/* Top Queries Section */}

Top Queries

{queries.length === 0 ? (

No query data available

) : (

{queries.map((query, index) => ( ))}

Query	Clicks	Impressions	CTR	Position
{query.query}	{formatNumber(query.clicks)}	{formatNumber(query.impressions)}	{formatPercent(query.ctr, 2)}	{query.position.toFixed(2)}

)}

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