feat: add city and region tracking to analytics

app/sites/[id]/page.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { getSite, type Site } from '@/lib/api/sites'
-import { getStats, getRealtime, getDailyStats, getTopPages, getTopReferrers, getCountries } from '@/lib/api/stats'
+import { getStats, getRealtime, getDailyStats, getTopPages, getTopReferrers, getCountries, getCities, getRegions } from '@/lib/api/stats'
 import { formatNumber, getDateRange } from '@/lib/utils/format'
 import { toast } from 'sonner'
 import LoadingOverlay from '@/components/LoadingOverlay'
@@ -12,6 +12,8 @@ import RealtimeVisitors from '@/components/dashboard/RealtimeVisitors'
 import TopPages from '@/components/dashboard/TopPages'
 import TopReferrers from '@/components/dashboard/TopReferrers'
 import Countries from '@/components/dashboard/Countries'
+import Cities from '@/components/dashboard/Cities'
+import Regions from '@/components/dashboard/Regions'
 import Chart from '@/components/dashboard/Chart'
 
 export default function SiteDashboardPage() {
@@ -27,6 +29,8 @@ export default function SiteDashboardPage() {
   const [topPages, setTopPages] = useState<any[]>([])
   const [topReferrers, setTopReferrers] = useState<any[]>([])
   const [countries, setCountries] = useState<any[]>([])
+  const [cities, setCities] = useState<any[]>([])
+  const [regions, setRegions] = useState<any[]>([])
   const [dateRange, setDateRange] = useState(getDateRange(30))
 
   useEffect(() => {
@@ -40,7 +44,7 @@ export default function SiteDashboardPage() {
   const loadData = async () => {
     try {
       setLoading(true)
-      const [siteData, statsData, realtimeData, dailyData, pagesData, referrersData, countriesData] = await Promise.all([
+      const [siteData, statsData, realtimeData, dailyData, pagesData, referrersData, countriesData, citiesData, regionsData] = await Promise.all([
         getSite(siteId),
         getStats(siteId, dateRange.start, dateRange.end),
         getRealtime(siteId),
@@ -48,6 +52,8 @@ export default function SiteDashboardPage() {
         getTopPages(siteId, dateRange.start, dateRange.end, 10),
         getTopReferrers(siteId, dateRange.start, dateRange.end, 10),
         getCountries(siteId, dateRange.start, dateRange.end, 10),
+        getCities(siteId, dateRange.start, dateRange.end, 10),
+        getRegions(siteId, dateRange.start, dateRange.end, 10),
       ])
       setSite(siteData)
       setStats(statsData || { pageviews: 0, visitors: 0 })
@@ -56,6 +62,8 @@ export default function SiteDashboardPage() {
       setTopPages(Array.isArray(pagesData) ? pagesData : [])
       setTopReferrers(Array.isArray(referrersData) ? referrersData : [])
       setCountries(Array.isArray(countriesData) ? countriesData : [])
+      setCities(Array.isArray(citiesData) ? citiesData : [])
+      setRegions(Array.isArray(regionsData) ? regionsData : [])
     } catch (error: any) {
       toast.error('Failed to load data: ' + (error.message || 'Unknown error'))
     } finally {
@@ -131,10 +139,15 @@ export default function SiteDashboardPage() {
         <TopPages pages={topPages} />
       </div>
 
-      <div className="grid gap-6 lg:grid-cols-2">
+      <div className="grid gap-6 lg:grid-cols-2 mb-8">
         <TopReferrers referrers={topReferrers} />
         <Countries countries={countries} />
       </div>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        <Cities cities={cities} />
+        <Regions regions={regions} />
+      </div>
     </div>
   )
 }

components/dashboard/Cities.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import { formatNumber } from '@/lib/utils/format'
+import * as Flags from 'country-flag-icons/react/3x2'
+
+interface CitiesProps {
+  cities: Array<{ city: string; country: string; pageviews: number }>
+}
+
+export default function Cities({ cities }: CitiesProps) {
+  if (!cities || cities.length === 0) {
+    return (
+      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6">
+        <h3 className="text-lg font-semibold mb-4 text-neutral-900 dark:text-white">
+          Cities
+        </h3>
+        <p className="text-neutral-600 dark:text-neutral-400">No data available</p>
+      </div>
+    )
+  }
+
+  const getFlagComponent = (countryCode: string) => {
+    if (!countryCode || countryCode === 'Unknown') return null
+    const FlagComponent = (Flags as any)[countryCode]
+    return FlagComponent ? <FlagComponent className="w-5 h-5 rounded-sm shadow-sm" /> : null
+  }
+
+  return (
+    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6">
+      <h3 className="text-lg font-semibold mb-4 text-neutral-900 dark:text-white">
+        Cities
+      </h3>
+      <div className="space-y-3">
+        {cities.map((city, index) => (
+          <div key={index} className="flex items-center justify-between">
+            <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
+              <span className="shrink-0">{getFlagComponent(city.country)}</span>
+              <span className="truncate">{city.city === 'Unknown' ? 'Unknown' : city.city}</span>
+            </div>
+            <div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
+              {formatNumber(city.pageviews)}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

components/dashboard/Regions.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import { formatNumber } from '@/lib/utils/format'
+import * as Flags from 'country-flag-icons/react/3x2'
+
+interface RegionsProps {
+  regions: Array<{ region: string; country: string; pageviews: number }>
+}
+
+export default function Regions({ regions }: RegionsProps) {
+  if (!regions || regions.length === 0) {
+    return (
+      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6">
+        <h3 className="text-lg font-semibold mb-4 text-neutral-900 dark:text-white">
+          Regions
+        </h3>
+        <p className="text-neutral-600 dark:text-neutral-400">No data available</p>
+      </div>
+    )
+  }
+
+  const getFlagComponent = (countryCode: string) => {
+    if (!countryCode || countryCode === 'Unknown') return null
+    const FlagComponent = (Flags as any)[countryCode]
+    return FlagComponent ? <FlagComponent className="w-5 h-5 rounded-sm shadow-sm" /> : null
+  }
+
+  return (
+    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6">
+      <h3 className="text-lg font-semibold mb-4 text-neutral-900 dark:text-white">
+        Regions
+      </h3>
+      <div className="space-y-3">
+        {regions.map((region, index) => (
+          <div key={index} className="flex items-center justify-between">
+            <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
+              <span className="shrink-0">{getFlagComponent(region.country)}</span>
+              <span className="truncate">{region.region === 'Unknown' ? 'Unknown' : region.region}</span>
+            </div>
+            <div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
+              {formatNumber(region.pageviews)}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

lib/api/stats.ts

@@ -20,6 +20,18 @@ export interface CountryStat {
   pageviews: number
 }
 
+export interface CityStat {
+  city: string
+  country: string
+  pageviews: number
+}
+
+export interface RegionStat {
+  region: string
+  country: string
+  pageviews: number
+}
+
 export interface DailyStat {
   date: string
   pageviews: number
@@ -66,6 +78,22 @@ export async function getCountries(siteId: string, startDate?: string, endDate?:
   return apiRequest<{ countries: CountryStat[] }>(`/sites/${siteId}/countries?${params.toString()}`).then(r => r?.countries || [])
 }
 
+export async function getCities(siteId: string, startDate?: string, endDate?: string, limit = 10): Promise<CityStat[]> {
+  const params = new URLSearchParams()
+  if (startDate) params.append('start_date', startDate)
+  if (endDate) params.append('end_date', endDate)
+  params.append('limit', limit.toString())
+  return apiRequest<{ cities: CityStat[] }>(`/sites/${siteId}/cities?${params.toString()}`).then(r => r?.cities || [])
+}
+
+export async function getRegions(siteId: string, startDate?: string, endDate?: string, limit = 10): Promise<RegionStat[]> {
+  const params = new URLSearchParams()
+  if (startDate) params.append('start_date', startDate)
+  if (endDate) params.append('end_date', endDate)
+  params.append('limit', limit.toString())
+  return apiRequest<{ regions: RegionStat[] }>(`/sites/${siteId}/regions?${params.toString()}`).then(r => r?.regions || [])
+}
+
 export async function getDailyStats(siteId: string, startDate?: string, endDate?: string): Promise<DailyStat[]> {
   const params = new URLSearchParams()
   if (startDate) params.append('start_date', startDate)