From dc7bffdf561ff5fdf120d73a7c760ae200a2b959 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 19 Mar 2026 12:01:23 +0100
Subject: [PATCH] fix: remove globe tab from locations, default to countries

Remove the 3D globe visualization tab and set Countries as the
default tab when visiting the dashboard.
---
 components/dashboard/Locations.tsx | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/components/dashboard/Locations.tsx b/components/dashboard/Locations.tsx
index 3fb9374..88f8d76 100644
--- a/components/dashboard/Locations.tsx
+++ b/components/dashboard/Locations.tsx
@@ -10,7 +10,6 @@ import * as Flags from 'country-flag-icons/react/3x2'
 import iso3166 from 'iso-3166-2'
 
 const DottedMap = dynamic(() => import('./DottedMap'), { ssr: false })
-const Globe = dynamic(() => import('./Globe'), { ssr: false })
 import Link from 'next/link'
 import { Modal, GlobeIcon, ArrowRightIcon } from '@ciphera-net/ui'
 import { ListSkeleton } from '@/components/skeletons'
@@ -29,14 +28,14 @@ interface LocationProps {
   onFilter?: (filter: DimensionFilter) => void
 }
 
-type Tab = 'map' | 'globe' | 'countries' | 'regions' | 'cities'
+type Tab = 'map' | 'countries' | 'regions' | 'cities'
 
 const LIMIT = 7
 
 const TAB_TO_DIMENSION: Record<string, string> = { countries: 'country', regions: 'region', cities: 'city' }
 
 export default function Locations({ countries, cities, regions, geoDataLevel = 'full', siteId, dateRange, onFilter }: LocationProps) {
-  const [activeTab, setActiveTab] = useState<Tab>('map')
+  const [activeTab, setActiveTab] = useState<Tab>('countries')
   const handleTabKeyDown = useTabListKeyboard()
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [modalSearch, setModalSearch] = useState('')
@@ -194,7 +193,7 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
     })
   }
 
-  const isVisualTab = activeTab === 'map' || activeTab === 'globe'
+  const isVisualTab = activeTab === 'map'
   const rawData = isVisualTab ? [] : getData()
   const data = filterUnknown(rawData)
   const totalPageviews = data.reduce((sum, item) => sum + item.pageviews, 0)
@@ -235,7 +234,7 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
             )}
           </div>
           <div className="flex gap-1 overflow-x-auto scrollbar-hide" role="tablist" aria-label="Location view tabs" onKeyDown={handleTabKeyDown}>
-            {(['map', 'globe', 'countries', 'regions', 'cities'] as Tab[]).map((tab) => (
+            {(['map', 'countries', 'regions', 'cities'] as Tab[]).map((tab) => (
               <button
                 key={tab}
                 onClick={() => setActiveTab(tab)}
@@ -267,9 +266,7 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
             </div>
           ) : isVisualTab ? (
             hasData ? (
-              activeTab === 'globe'
-                ? (inView ? <Globe data={filterUnknown(countries) as { country: string; pageviews: number }[]} /> : null)
-                : (inView ? <DottedMap data={filterUnknown(countries) as { country: string; pageviews: number }[]} /> : null)
+              inView ? <DottedMap data={filterUnknown(countries) as { country: string; pageviews: number }[]} /> : null
             ) : (
               <div className="h-full flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
                 <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">