fix: Enhance dashboard components with site settings for data collection options

app/share/[id]/page.tsx

@@ -280,26 +280,33 @@ export default function PublicDashboardPage() {
 
         {/* Details Grid */}
         <div className="grid gap-6 lg:grid-cols-2 mb-8">
-          <TopPages 
+          <TopPages
-            topPages={safeTopPages} 
+            topPages={safeTopPages}
             entryPages={safeEntryPages}
             exitPages={safeExitPages}
             domain={site.domain}
+            collectPagePaths={site.collect_page_paths ?? true}
+          />
+          <TopReferrers
+            referrers={safeTopReferrers}
+            collectReferrers={site.collect_referrers ?? true}
           />
-          <TopReferrers referrers={safeTopReferrers} />
         </div>
 
         <div className="grid gap-6 lg:grid-cols-2 mb-8">
-          <Locations 
+          <Locations
-            countries={safeCountries} 
+            countries={safeCountries}
-            cities={safeCities} 
+            cities={safeCities}
-            regions={safeRegions} 
+            regions={safeRegions}
+            geoDataLevel={site.collect_geo_data || 'full'}
           />
-          <TechSpecs 
+          <TechSpecs
-            browsers={safeBrowsers} 
+            browsers={safeBrowsers}
-            os={safeOS} 
+            os={safeOS}
             devices={safeDevices}
             screenResolutions={safeScreenResolutions}
+            collectDeviceInfo={site.collect_device_info ?? true}
+            collectScreenResolution={site.collect_screen_resolution ?? true}
           />
         </div>
 

app/sites/[id]/page.tsx

@@ -234,18 +234,34 @@ export default function SiteDashboardPage() {
       </div>
 
       <div className="grid gap-6 lg:grid-cols-2 mb-8">
-        <ContentStats 
+        <ContentStats
-          topPages={topPages} 
+          topPages={topPages}
-          entryPages={entryPages} 
+          entryPages={entryPages}
-          exitPages={exitPages} 
+          exitPages={exitPages}
           domain={site.domain}
+          collectPagePaths={site.collect_page_paths ?? true}
+        />
+        <TopReferrers
+          referrers={topReferrers}
+          collectReferrers={site.collect_referrers ?? true}
         />
-        <TopReferrers referrers={topReferrers} />
       </div>
 
       <div className="grid gap-6 lg:grid-cols-2 mb-8">
-        <Locations countries={countries} cities={cities} regions={regions} />
+        <Locations
-        <TechSpecs browsers={browsers} os={os} devices={devices} screenResolutions={screenResolutions} />
+          countries={countries}
+          cities={cities}
+          regions={regions}
+          geoDataLevel={site.collect_geo_data || 'full'}
+        />
+        <TechSpecs
+          browsers={browsers}
+          os={os}
+          devices={devices}
+          screenResolutions={screenResolutions}
+          collectDeviceInfo={site.collect_device_info ?? true}
+          collectScreenResolution={site.collect_screen_resolution ?? true}
+        />
       </div>
 
       <DatePicker

components/dashboard/ContentStats.tsx

@@ -11,24 +11,32 @@ interface ContentStatsProps {
   entryPages: TopPage[]
   exitPages: TopPage[]
   domain: string
+  collectPagePaths?: boolean
 }
 
 type Tab = 'top_pages' | 'entry_pages' | 'exit_pages'
 
 const LIMIT = 7
 
-export default function ContentStats({ topPages, entryPages, exitPages, domain }: ContentStatsProps) {
+export default function ContentStats({ topPages, entryPages, exitPages, domain, collectPagePaths = true }: ContentStatsProps) {
   const [activeTab, setActiveTab] = useState<Tab>('top_pages')
   const [isModalOpen, setIsModalOpen] = useState(false)
 
+  // Filter out generic "/" entries when page paths are disabled (all traffic shows as "/")
+  const filterGenericPaths = (pages: TopPage[]) => {
+    if (!collectPagePaths) return []
+    // Filter out pages that are just "/" with high traffic (indicator of disabled tracking)
+    return pages.filter(p => p.path && p.path !== '')
+  }
+
   const getData = () => {
     switch (activeTab) {
       case 'top_pages':
-        return topPages
+        return filterGenericPaths(topPages)
       case 'entry_pages':
-        return entryPages
+        return filterGenericPaths(entryPages)
       case 'exit_pages':
-        return exitPages
+        return filterGenericPaths(exitPages)
       default:
         return []
     }
@@ -83,7 +91,11 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain }
         </div>
 
         <div className="space-y-2 flex-1 min-h-[270px]">
-          {hasData ? (
+          {!collectPagePaths ? (
+            <div className="h-full flex flex-col items-center justify-center text-center px-4">
+              <p className="text-neutral-500 dark:text-neutral-400 text-sm">Page path tracking is disabled in site settings</p>
+            </div>
+          ) : hasData ? (
             <>
               {displayedData.map((page, index) => (
                 <div key={index} className="flex items-center justify-between h-9 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">

components/dashboard/Locations.tsx

@@ -12,13 +12,14 @@ interface LocationProps {
   countries: Array<{ country: string; pageviews: number }>
   cities: Array<{ city: string; country: string; pageviews: number }>
   regions: Array<{ region: string; country: string; pageviews: number }>
+  geoDataLevel?: 'full' | 'country' | 'none'
 }
 
 type Tab = 'map' | 'countries' | 'regions' | 'cities'
 
 const LIMIT = 7
 
-export default function Locations({ countries, cities, regions }: LocationProps) {
+export default function Locations({ countries, cities, regions, geoDataLevel = 'full' }: LocationProps) {
   const [activeTab, setActiveTab] = useState<Tab>('map')
   const [isModalOpen, setIsModalOpen] = useState(false)
 
@@ -68,12 +69,42 @@ export default function Locations({ countries, cities, regions }: LocationProps)
     }
   }
 
-  const data = activeTab === 'map' ? [] : getData()
+  // Check if the current tab's data is disabled by privacy settings
-  const hasData = activeTab === 'map' ? (countries && countries.length > 0) : (data && data.length > 0)
+  const isTabDisabled = () => {
+    if (geoDataLevel === 'none') return true
+    if (geoDataLevel === 'country' && (activeTab === 'regions' || activeTab === 'cities')) return true
+    return false
+  }
+
+  // Filter out "Unknown" entries that result from disabled collection
+  const filterUnknown = (data: any[]) => {
+    return data.filter(item => {
+      if (activeTab === 'countries') return item.country && item.country !== 'Unknown' && item.country !== ''
+      if (activeTab === 'regions') return item.region && item.region !== 'Unknown' && item.region !== ''
+      if (activeTab === 'cities') return item.city && item.city !== 'Unknown' && item.city !== ''
+      return true
+    })
+  }
+
+  const rawData = activeTab === 'map' ? [] : getData()
+  const data = filterUnknown(rawData)
+  const hasData = activeTab === 'map'
+    ? (countries && filterUnknown(countries).length > 0)
+    : (data && data.length > 0)
   const displayedData = (activeTab !== 'map' && hasData) ? (data as any[]).slice(0, LIMIT) : []
   const emptySlots = Math.max(0, LIMIT - displayedData.length)
   const showViewAll = activeTab !== 'map' && hasData && data.length > LIMIT
 
+  const getDisabledMessage = () => {
+    if (geoDataLevel === 'none') {
+      return 'Geographic data collection is disabled in site settings'
+    }
+    if (geoDataLevel === 'country' && (activeTab === 'regions' || activeTab === 'cities')) {
+      return `${activeTab === 'regions' ? 'Region' : 'City'} tracking is disabled. Only country-level data is collected.`
+    }
+    return 'No data available'
+  }
+
   return (
     <>
       <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6 h-full flex flex-col">
@@ -109,8 +140,12 @@ export default function Locations({ countries, cities, regions }: LocationProps)
         </div>
 
         <div className="space-y-2 flex-1 min-h-[270px]">
-          {activeTab === 'map' ? (
+          {isTabDisabled() ? (
-            hasData ? <WorldMap data={countries} /> : (
+            <div className="h-full flex flex-col items-center justify-center text-center px-4">
+              <p className="text-neutral-500 dark:text-neutral-400 text-sm">{getDisabledMessage()}</p>
+            </div>
+          ) : activeTab === 'map' ? (
+            hasData ? <WorldMap data={filterUnknown(countries)} /> : (
               <div className="h-full flex flex-col items-center justify-center">
                 <p className="text-neutral-600 dark:text-neutral-400">No data available</p>
               </div>
@@ -123,9 +158,9 @@ export default function Locations({ countries, cities, regions }: LocationProps)
                     <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
                       {activeTab === 'countries' && <span className="shrink-0">{getFlagComponent(item.country)}</span>}
                       {activeTab !== 'countries' && <span className="shrink-0">{getFlagComponent(item.country)}</span>}
-                      
+
                       <span className="truncate">
-                        {activeTab === 'countries' ? getCountryName(item.country) : 
+                        {activeTab === 'countries' ? getCountryName(item.country) :
                          activeTab === 'regions' ? getRegionName(item.region, item.country) :
                          (item.city === 'Unknown' ? 'Unknown' : item.city)}
                       </span>

components/dashboard/TechSpecs.tsx

@@ -11,17 +11,24 @@ interface TechSpecsProps {
   os: Array<{ os: string; pageviews: number }>
   devices: Array<{ device: string; pageviews: number }>
   screenResolutions: Array<{ screen_resolution: string; pageviews: number }>
+  collectDeviceInfo?: boolean
+  collectScreenResolution?: boolean
 }
 
 type Tab = 'browsers' | 'os' | 'devices' | 'screens'
 
 const LIMIT = 7
 
-export default function TechSpecs({ browsers, os, devices, screenResolutions }: TechSpecsProps) {
+export default function TechSpecs({ browsers, os, devices, screenResolutions, collectDeviceInfo = true, collectScreenResolution = true }: TechSpecsProps) {
   const [activeTab, setActiveTab] = useState<Tab>('browsers')
   const [isModalOpen, setIsModalOpen] = useState(false)
 
-  const getData = () => {
+  // Filter out "Unknown" entries that result from disabled collection
+  const filterUnknown = (items: Array<{ name: string; pageviews: number; icon: React.ReactNode }>) => {
+    return items.filter(item => item.name && item.name !== 'Unknown' && item.name !== '')
+  }
+
+  const getRawData = () => {
     switch (activeTab) {
       case 'browsers':
         return browsers.map(b => ({ name: b.browser, pageviews: b.pageviews, icon: getBrowserIcon(b.browser) }))
@@ -36,7 +43,29 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions }:
     }
   }
 
-  const data = getData()
+  // Check if current tab is disabled by privacy settings
+  const isTabDisabled = () => {
+    if (!collectDeviceInfo && (activeTab === 'browsers' || activeTab === 'os' || activeTab === 'devices')) {
+      return true
+    }
+    if (!collectScreenResolution && activeTab === 'screens') {
+      return true
+    }
+    return false
+  }
+
+  const getDisabledMessage = () => {
+    if (!collectDeviceInfo && (activeTab === 'browsers' || activeTab === 'os' || activeTab === 'devices')) {
+      return 'Device info collection is disabled in site settings'
+    }
+    if (!collectScreenResolution && activeTab === 'screens') {
+      return 'Screen resolution collection is disabled in site settings'
+    }
+    return 'No data available'
+  }
+
+  const rawData = getRawData()
+  const data = filterUnknown(rawData)
   const hasData = data && data.length > 0
   const displayedData = hasData ? data.slice(0, LIMIT) : []
   const emptySlots = Math.max(0, LIMIT - displayedData.length)
@@ -77,13 +106,17 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions }:
         </div>
 
         <div className="space-y-2 flex-1 min-h-[270px]">
-          {hasData ? (
+          {isTabDisabled() ? (
+            <div className="h-full flex flex-col items-center justify-center text-center px-4">
+              <p className="text-neutral-500 dark:text-neutral-400 text-sm">{getDisabledMessage()}</p>
+            </div>
+          ) : hasData ? (
             <>
               {displayedData.map((item, index) => (
                 <div key={index} className="flex items-center justify-between h-9 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">
                   <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
                     {item.icon && <span className="text-lg">{item.icon}</span>}
-                    <span className="truncate">{item.name === 'Unknown' ? 'Unknown' : item.name}</span>
+                    <span className="truncate">{item.name}</span>
                   </div>
                   <div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
                     {formatNumber(item.pageviews)}

components/dashboard/TopReferrers.tsx

@@ -7,17 +7,23 @@ import { Modal } from '@ciphera-net/ui'
 
 interface TopReferrersProps {
   referrers: Array<{ referrer: string; pageviews: number }>
+  collectReferrers?: boolean
 }
 
 const LIMIT = 7
 
-export default function TopReferrers({ referrers }: TopReferrersProps) {
+export default function TopReferrers({ referrers, collectReferrers = true }: TopReferrersProps) {
   const [isModalOpen, setIsModalOpen] = useState(false)
 
-  const hasData = referrers && referrers.length > 0
+  // Filter out empty/unknown referrers
-  const displayedReferrers = hasData ? referrers.slice(0, LIMIT) : []
+  const filteredReferrers = (referrers || []).filter(
+    ref => ref.referrer && ref.referrer !== 'Unknown' && ref.referrer !== ''
+  )
+
+  const hasData = filteredReferrers.length > 0
+  const displayedReferrers = hasData ? filteredReferrers.slice(0, LIMIT) : []
   const emptySlots = Math.max(0, LIMIT - displayedReferrers.length)
-  const showViewAll = hasData && referrers.length > LIMIT
+  const showViewAll = hasData && filteredReferrers.length > LIMIT
 
   return (
     <>
@@ -37,7 +43,11 @@ export default function TopReferrers({ referrers }: TopReferrersProps) {
         </div>
 
         <div className="space-y-2 flex-1 min-h-[270px]">
-          {hasData ? (
+          {!collectReferrers ? (
+            <div className="h-full flex flex-col items-center justify-center text-center px-4">
+              <p className="text-neutral-500 dark:text-neutral-400 text-sm">Referrer tracking is disabled in site settings</p>
+            </div>
+          ) : hasData ? (
             <>
               {displayedReferrers.map((ref, index) => (
                 <div key={index} className="flex items-center justify-between h-9 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">