refactor: merge cities and regions into countries component with tabs

app/sites/[id]/page.tsx

@@ -12,8 +12,6 @@ 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() {
@@ -141,12 +139,7 @@ export default function SiteDashboardPage() {
 
       <div className="grid gap-6 lg:grid-cols-2 mb-8">
         <TopReferrers referrers={topReferrers} />
-        <Countries countries={countries} />
+        <Countries countries={countries} cities={cities} regions={regions} />
-      </div>
-
-      <div className="grid gap-6 lg:grid-cols-2">
-        <Cities cities={cities} />
-        <Regions regions={regions} />
       </div>
     </div>
   )

components/dashboard/Cities.tsx

@@ -1,48 +0,0 @@
-'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/Countries.tsx

@@ -1,23 +1,19 @@
 'use client'
 
+import { useState } from 'react'
 import { formatNumber } from '@/lib/utils/format'
 import * as Flags from 'country-flag-icons/react/3x2'
 
-interface CountriesProps {
+interface LocationProps {
   countries: Array<{ country: string; pageviews: number }>
+  cities: Array<{ city: string; country: string; pageviews: number }>
+  regions: Array<{ region: string; country: string; pageviews: number }>
 }
 
-export default function Countries({ countries }: CountriesProps) {
+type Tab = 'countries' | 'regions' | 'cities'
-  if (!countries || countries.length === 0) {
+
-    return (
+export default function Locations({ countries, cities, regions }: LocationProps) {
-      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6">
+  const [activeTab, setActiveTab] = useState<Tab>('countries')
-        <h3 className="text-lg font-semibold mb-4 text-neutral-900 dark:text-white">
-          Countries
-        </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
@@ -37,11 +33,12 @@ export default function Countries({ countries }: CountriesProps) {
     }
   }
 
+  const renderContent = () => {
+    if (activeTab === 'countries') {
+      if (!countries || countries.length === 0) {
+        return <p className="text-neutral-600 dark:text-neutral-400">No data available</p>
+      }
       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">
-        Countries
-      </h3>
         <div className="space-y-3">
           {countries.map((country, index) => (
             <div key={index} className="flex items-center justify-between">
@@ -55,6 +52,92 @@ export default function Countries({ countries }: CountriesProps) {
             </div>
           ))}
         </div>
+      )
+    }
+
+    if (activeTab === 'regions') {
+      if (!regions || regions.length === 0) {
+        return <p className="text-neutral-600 dark:text-neutral-400">No data available</p>
+      }
+      return (
+        <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>
+      )
+    }
+
+    if (activeTab === 'cities') {
+      if (!cities || cities.length === 0) {
+        return <p className="text-neutral-600 dark:text-neutral-400">No data available</p>
+      }
+      return (
+        <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>
+      )
+    }
+  }
+
+  return (
+    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6 h-full">
+      <div className="flex items-center justify-between mb-6">
+        <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+          Locations
+        </h3>
+        <div className="flex p-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg">
+          <button
+            onClick={() => setActiveTab('countries')}
+            className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
+              activeTab === 'countries'
+                ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
+                : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'
+            }`}
+          >
+            Countries
+          </button>
+          <button
+            onClick={() => setActiveTab('regions')}
+            className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
+              activeTab === 'regions'
+                ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
+                : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'
+            }`}
+          >
+            Regions
+          </button>
+          <button
+            onClick={() => setActiveTab('cities')}
+            className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
+              activeTab === 'cities'
+                ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
+                : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'
+            }`}
+          >
+            Cities
+          </button>
+        </div>
+      </div>
+      {renderContent()}
     </div>
   )
 }

components/dashboard/Regions.tsx

@@ -1,48 +0,0 @@
-'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>
-  )
-}