ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

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

Browse Source
This commit is contained in:
Usman Baig
2026-01-19 12:10:44 +01:00
parent c807568e93
commit c8695ff964
6 changed files with 152 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
app/share/[id]/page.tsx
View File

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

30
app/sites/[id]/page.tsx
View File

@@ -234,18 +234,34 @@ export default function SiteDashboardPage() {
</div>
<div className="grid gap-6 lg:grid-cols-2 mb-8">
<ContentStats
topPages={topPages}
entryPages={entryPages}
exitPages={exitPages}
<ContentStats
topPages={topPages}
entryPages={entryPages}
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} />
<TechSpecs browsers={browsers} os={os} devices={devices} screenResolutions={screenResolutions} />
<Locations
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

22
components/dashboard/ContentStats.tsx
View File

@@ -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">

49
components/dashboard/Locations.tsx
View File

@@ -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()
const hasData = activeTab === 'map' ? (countries && countries.length > 0) : (data && data.length > 0)
// Check if the current tab's data is disabled by privacy settings
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' ? (
hasData ? <WorldMap data={countries} /> : (
{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>
) : 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>

43
components/dashboard/TechSpecs.tsx
View File

@@ -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)}

20
components/dashboard/TopReferrers.tsx
View File

@@ -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
const displayedReferrers = hasData ? referrers.slice(0, LIMIT) : []
// Filter out empty/unknown referrers
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">