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

feat: display screen resolution, content stats, and advanced metrics on dashboard

Browse Source
This commit is contained in:
Usman Baig
2026-01-16 22:22:02 +01:00
parent 1e2fa71e5c
commit 19392ab385
9 changed files with 263 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,15 +3,15 @@
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, getCities, getBrowsers, getOS, getDevices } from '@/lib/api/stats'
import { formatNumber, getDateRange } from '@/lib/utils/format'
import { getStats, getRealtime, getDailyStats, getTopPages, getTopReferrers, getCountries, getCities, getRegions, getBrowsers, getOS, getDevices, getScreenResolutions, getEntryPages, getExitPages } from '@/lib/api/stats'
import { formatNumber, formatDuration, getDateRange } from '@/lib/utils/format'
import { toast } from 'sonner'
import LoadingOverlay from '@/components/LoadingOverlay'
import StatsCard from '@/components/dashboard/StatsCard'
import RealtimeVisitors from '@/components/dashboard/RealtimeVisitors'
import TopPages from '@/components/dashboard/TopPages'
import ContentStats from '@/components/dashboard/ContentStats'
import TopReferrers from '@/components/dashboard/TopReferrers'
import Countries from '@/components/dashboard/Countries'
import Locations from '@/components/dashboard/Locations'
import TechSpecs from '@/components/dashboard/TechSpecs'
import Chart from '@/components/dashboard/Chart'
@@ -22,16 +22,20 @@ export default function SiteDashboardPage() {
const [site, setSite] = useState<Site | null>(null)
const [loading, setLoading] = useState(true)
const [stats, setStats] = useState({ pageviews: 0, visitors: 0 })
const [stats, setStats] = useState({ pageviews: 0, visitors: 0, bounce_rate: 0, avg_duration: 0 })
const [realtime, setRealtime] = useState(0)
const [dailyStats, setDailyStats] = useState<any[]>([])
const [topPages, setTopPages] = useState<any[]>([])
const [entryPages, setEntryPages] = useState<any[]>([])
const [exitPages, setExitPages] = useState<any[]>([])
const [topReferrers, setTopReferrers] = useState<any[]>([])
const [countries, setCountries] = useState<any[]>([])
const [cities, setCities] = useState<any[]>([])
const [regions, setRegions] = useState<any[]>([])
const [browsers, setBrowsers] = useState<any[]>([])
const [os, setOS] = useState<any[]>([])
const [devices, setDevices] = useState<any[]>([])
const [screenResolutions, setScreenResolutions] = useState<any[]>([])
const [dateRange, setDateRange] = useState(getDateRange(30))
useEffect(() => {
@@ -45,30 +49,54 @@ export default function SiteDashboardPage() {
const loadData = async () => {
try {
setLoading(true)
const [siteData, statsData, realtimeData, dailyData, pagesData, referrersData, countriesData, citiesData, browsersData, osData, devicesData] = await Promise.all([
const [
siteData,
statsData,
realtimeData,
dailyData,
pagesData,
entryPagesData,
exitPagesData,
referrersData,
countriesData,
citiesData,
regionsData,
browsersData,
osData,
devicesData,
screensData
] = await Promise.all([
getSite(siteId),
getStats(siteId, dateRange.start, dateRange.end),
getRealtime(siteId),
getDailyStats(siteId, dateRange.start, dateRange.end),
getTopPages(siteId, dateRange.start, dateRange.end, 10),
getEntryPages(siteId, dateRange.start, dateRange.end, 10),
getExitPages(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),
getBrowsers(siteId, dateRange.start, dateRange.end, 10),
getOS(siteId, dateRange.start, dateRange.end, 10),
getDevices(siteId, dateRange.start, dateRange.end, 10),
getScreenResolutions(siteId, dateRange.start, dateRange.end, 10),
])
setSite(siteData)
setStats(statsData || { pageviews: 0, visitors: 0 })
setStats(statsData || { pageviews: 0, visitors: 0, bounce_rate: 0, avg_duration: 0 })
setRealtime(realtimeData?.visitors || 0)
setDailyStats(Array.isArray(dailyData) ? dailyData : [])
setTopPages(Array.isArray(pagesData) ? pagesData : [])
setEntryPages(Array.isArray(entryPagesData) ? entryPagesData : [])
setExitPages(Array.isArray(exitPagesData) ? exitPagesData : [])
setTopReferrers(Array.isArray(referrersData) ? referrersData : [])
setCountries(Array.isArray(countriesData) ? countriesData : [])
setCities(Array.isArray(citiesData) ? citiesData : [])
setRegions(Array.isArray(regionsData) ? regionsData : [])
setBrowsers(Array.isArray(browsersData) ? browsersData : [])
setOS(Array.isArray(osData) ? osData : [])
setDevices(Array.isArray(devicesData) ? devicesData : [])
setScreenResolutions(Array.isArray(screensData) ? screensData : [])
} catch (error: any) {
toast.error('Failed to load data: ' + (error.message || 'Unknown error'))
} finally {
@@ -132,25 +160,26 @@ export default function SiteDashboardPage() {
</div>
</div>
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4 mb-8">
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-5 mb-8">
<StatsCard title="Pageviews" value={formatNumber(stats.pageviews)} />
<StatsCard title="Visitors" value={formatNumber(stats.visitors)} />
<RealtimeVisitors count={realtime} />
<StatsCard title="Bounce Rate" value="-" />
<StatsCard title="Bounce Rate" value={`${Math.round(stats.bounce_rate)}%`} />
<StatsCard title="Avg Visit Duration" value={formatDuration(stats.avg_duration)} />
</div>
<div className="grid gap-6 lg:grid-cols-2 mb-8">
<Chart data={dailyStats} />
<TopPages pages={topPages} />
<ContentStats topPages={topPages} entryPages={entryPages} exitPages={exitPages} />
</div>
<div className="grid gap-6 lg:grid-cols-2 mb-8">
<TopReferrers referrers={topReferrers} />
<Countries countries={countries} cities={cities} />
<Locations countries={countries} cities={cities} regions={regions} />
</div>
<div className="grid gap-6 lg:grid-cols-2 mb-8">
<TechSpecs browsers={browsers} os={os} devices={devices} />
<TechSpecs browsers={browsers} os={os} devices={devices} screenResolutions={screenResolutions} />
</div>
</div>
)

91
components/dashboard/ContentStats.tsx Normal file
View File

@@ -0,0 +1,91 @@
'use client'
import { useState } from 'react'
import { formatNumber } from '@/lib/utils/format'
import { TopPage } from '@/lib/api/stats'
interface ContentStatsProps {
topPages: TopPage[]
entryPages: TopPage[]
exitPages: TopPage[]
}
type Tab = 'top_pages' | 'entry_pages' | 'exit_pages'
export default function ContentStats({ topPages, entryPages, exitPages }: ContentStatsProps) {
const [activeTab, setActiveTab] = useState<Tab>('top_pages')
const renderContent = () => {
let data: TopPage[] = []
if (activeTab === 'top_pages') {
data = topPages
} else if (activeTab === 'entry_pages') {
data = entryPages
} else if (activeTab === 'exit_pages') {
data = exitPages
}
if (!data || data.length === 0) {
return <p className="text-neutral-600 dark:text-neutral-400">No data available</p>
}
return (
<div className="space-y-3">
{data.map((page, index) => (
<div key={index} className="flex items-center justify-between">
<div className="flex-1 truncate text-neutral-900 dark:text-white">
{page.path}
</div>
<div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
{formatNumber(page.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">
Content
</h3>
<div className="flex p-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg">
<button
onClick={() => setActiveTab('top_pages')}
className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
activeTab === 'top_pages'
? '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'
}`}
>
Top Pages
</button>
<button
onClick={() => setActiveTab('entry_pages')}
className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
activeTab === 'entry_pages'
? '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'
}`}
>
Entry
</button>
<button
onClick={() => setActiveTab('exit_pages')}
className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
activeTab === 'exit_pages'
? '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'
}`}
>
Exit
</button>
</div>
</div>
{renderContent()}
</div>
)
}

36
components/dashboard/Countries.tsx → components/dashboard/Locations.tsx
View File

@@ -8,11 +8,12 @@ import WorldMap from './WorldMap'
interface LocationProps {
countries: Array<{ country: string; pageviews: number }>
cities: Array<{ city: string; country: string; pageviews: number }>
regions: Array<{ region: string; country: string; pageviews: number }>
}
type Tab = 'map' | 'countries' | 'cities'
type Tab = 'map' | 'countries' | 'regions' | 'cities'
export default function Locations({ countries, cities }: LocationProps) {
export default function Locations({ countries, cities, regions }: LocationProps) {
const [activeTab, setActiveTab] = useState<Tab>('map')
const getFlagComponent = (countryCode: string) => {
@@ -62,6 +63,27 @@ export default function Locations({ countries, cities }: LocationProps) {
)
}
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>
@@ -111,6 +133,16 @@ export default function Locations({ countries, cities }: LocationProps) {
>
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 ${

17
components/dashboard/TechSpecs.tsx
View File

@@ -7,11 +7,12 @@ interface TechSpecsProps {
browsers: Array<{ browser: string; pageviews: number }>
os: Array<{ os: string; pageviews: number }>
devices: Array<{ device: string; pageviews: number }>
screenResolutions: Array<{ screen_resolution: string; pageviews: number }>
}
type Tab = 'browsers' | 'os' | 'devices'
type Tab = 'browsers' | 'os' | 'devices' | 'screens'
export default function TechSpecs({ browsers, os, devices }: TechSpecsProps) {
export default function TechSpecs({ browsers, os, devices, screenResolutions }: TechSpecsProps) {
const [activeTab, setActiveTab] = useState<Tab>('browsers')
const renderContent = () => {
@@ -23,6 +24,8 @@ export default function TechSpecs({ browsers, os, devices }: TechSpecsProps) {
data = os.map(o => ({ name: o.os, pageviews: o.pageviews }))
} else if (activeTab === 'devices') {
data = devices.map(d => ({ name: d.device, pageviews: d.pageviews }))
} else if (activeTab === 'screens') {
data = screenResolutions.map(s => ({ name: s.screen_resolution, pageviews: s.pageviews }))
}
if (!data || data.length === 0) {
@@ -82,6 +85,16 @@ export default function TechSpecs({ browsers, os, devices }: TechSpecsProps) {
>
Devices
</button>
<button
onClick={() => setActiveTab('screens')}
className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
activeTab === 'screens'
? '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'
}`}
>
Screens
</button>
</div>
</div>
{renderContent()}

40
components/dashboard/TopPages.tsx
View File

@@ -1,40 +0,0 @@
'use client'
import { formatNumber } from '@/lib/utils/format'
interface TopPagesProps {
pages: Array<{ path: string; pageviews: number }>
}
export default function TopPages({ pages }: TopPagesProps) {
if (!pages || pages.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">
Top Pages
</h3>
<p className="text-neutral-600 dark:text-neutral-400">No data available</p>
</div>
)
}
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">
Top Pages
</h3>
<div className="space-y-3">
{pages.map((page, index) => (
<div key={index} className="flex items-center justify-between">
<div className="flex-1 truncate text-neutral-900 dark:text-white">
{page.path}
</div>
<div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
{formatNumber(page.pageviews)}
</div>
</div>
))}
</div>
</div>
)
}

31
lib/api/stats.ts
View File

@@ -3,11 +3,19 @@ import apiRequest from './client'
export interface Stats {
pageviews: number
visitors: number
bounce_rate: number
avg_duration: number
}
export interface TopPage {
path: string
pageviews: number
visits?: number // For entry/exit pages
}
export interface ScreenResolutionStat {
screen_resolution: string
pageviews: number
}
export interface TopReferrer {
@@ -139,3 +147,26 @@ export async function getDailyStats(siteId: string, startDate?: string, endDate?
if (endDate) params.append('end_date', endDate)
return apiRequest<{ stats: DailyStat[] }>(`/sites/${siteId}/daily?${params.toString()}`).then(r => r?.stats || [])
}
export async function getEntryPages(siteId: string, startDate?: string, endDate?: string, limit = 10): Promise<TopPage[]> {
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<{ pages: TopPage[] }>(`/sites/${siteId}/entry-pages?${params.toString()}`).then(r => r?.pages || [])
}
export async function getExitPages(siteId: string, startDate?: string, endDate?: string, limit = 10): Promise<TopPage[]> {
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<{ pages: TopPage[] }>(`/sites/${siteId}/exit-pages?${params.toString()}`).then(r => r?.pages || [])
}
export async function getScreenResolutions(siteId: string, startDate?: string, endDate?: string, limit = 10): Promise<ScreenResolutionStat[]> {
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<{ screen_resolutions: ScreenResolutionStat[] }>(`/sites/${siteId}/screen-resolutions?${params.toString()}`).then(r => r?.screen_resolutions || [])
}

23
lib/api/stats_extra.ts Normal file
View File

@@ -0,0 +1,23 @@
export async function getEntryPages(siteId: string, startDate?: string, endDate?: string, limit = 10): Promise<TopPage[]> {
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<{ pages: TopPage[] }>(`/sites/${siteId}/entry-pages?${params.toString()}`).then(r => r?.pages || [])
}
export async function getExitPages(siteId: string, startDate?: string, endDate?: string, limit = 10): Promise<TopPage[]> {
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<{ pages: TopPage[] }>(`/sites/${siteId}/exit-pages?${params.toString()}`).then(r => r?.pages || [])
}
export async function getScreenResolutions(siteId: string, startDate?: string, endDate?: string, limit = 10): Promise<ScreenResolutionStat[]> {
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<{ screen_resolutions: ScreenResolutionStat[] }>(`/sites/${siteId}/screen-resolutions?${params.toString()}`).then(r => r?.screen_resolutions || [])
}

14
lib/utils/format.ts
View File

@@ -42,3 +42,17 @@ export function formatRelativeTime(date: string | Date): string {
if (minutes > 0) return `${minutes} minute${minutes > 1 ? 's' : ''} ago`
return 'Just now'
}
/**
* Format duration in seconds to "1m 30s" or "30s"
*/
export function formatDuration(seconds: number): string {
if (!seconds) return '0s'
const m = Math.floor(seconds / 60)
const s = Math.floor(seconds % 60)
if (m > 0) {
return `${m}m ${s}s`
}
return `${s}s`
}

14
lib/utils/format_extra.ts Normal file
View File

@@ -0,0 +1,14 @@
/**
* Format duration in seconds to "1m 30s" or "30s"
*/
export function formatDuration(seconds: number): string {
if (!seconds) return '0s'
const m = Math.floor(seconds / 60)
const s = Math.floor(seconds % 60)
if (m > 0) {
return `${m}m ${s}s`
}
return `${s}s`
}