feat: add technology stats (browser, os, device) to analytics dashboard

app/sites/[id]/page.tsx

@@ -3,7 +3,7 @@
 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 } from '@/lib/api/stats'
+import { getStats, getRealtime, getDailyStats, getTopPages, getTopReferrers, getCountries, getCities, getBrowsers, getOS, getDevices } from '@/lib/api/stats'
 import { formatNumber, getDateRange } from '@/lib/utils/format'
 import { toast } from 'sonner'
 import LoadingOverlay from '@/components/LoadingOverlay'
@@ -12,6 +12,7 @@ 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 TechSpecs from '@/components/dashboard/TechSpecs'
 import Chart from '@/components/dashboard/Chart'
 
 export default function SiteDashboardPage() {
@@ -28,6 +29,9 @@ export default function SiteDashboardPage() {
   const [topReferrers, setTopReferrers] = useState<any[]>([])
   const [countries, setCountries] = useState<any[]>([])
   const [cities, setCities] = useState<any[]>([])
+  const [browsers, setBrowsers] = useState<any[]>([])
+  const [os, setOS] = useState<any[]>([])
+  const [devices, setDevices] = useState<any[]>([])
   const [dateRange, setDateRange] = useState(getDateRange(30))
 
   useEffect(() => {
@@ -41,7 +45,7 @@ export default function SiteDashboardPage() {
   const loadData = async () => {
     try {
       setLoading(true)
-      const [siteData, statsData, realtimeData, dailyData, pagesData, referrersData, countriesData, citiesData] = await Promise.all([
+      const [siteData, statsData, realtimeData, dailyData, pagesData, referrersData, countriesData, citiesData, browsersData, osData, devicesData] = await Promise.all([
         getSite(siteId),
         getStats(siteId, dateRange.start, dateRange.end),
         getRealtime(siteId),
@@ -50,6 +54,9 @@ export default function SiteDashboardPage() {
         getTopReferrers(siteId, dateRange.start, dateRange.end, 10),
         getCountries(siteId, dateRange.start, dateRange.end, 10),
         getCities(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),
       ])
       setSite(siteData)
       setStats(statsData || { pageviews: 0, visitors: 0 })
@@ -59,6 +66,9 @@ export default function SiteDashboardPage() {
       setTopReferrers(Array.isArray(referrersData) ? referrersData : [])
       setCountries(Array.isArray(countriesData) ? countriesData : [])
       setCities(Array.isArray(citiesData) ? citiesData : [])
+      setBrowsers(Array.isArray(browsersData) ? browsersData : [])
+      setOS(Array.isArray(osData) ? osData : [])
+      setDevices(Array.isArray(devicesData) ? devicesData : [])
     } catch (error: any) {
       toast.error('Failed to load data: ' + (error.message || 'Unknown error'))
     } finally {
@@ -138,6 +148,10 @@ export default function SiteDashboardPage() {
         <TopReferrers referrers={topReferrers} />
         <Countries countries={countries} cities={cities} />
       </div>
+
+      <div className="grid gap-6 lg:grid-cols-2 mb-8">
+        <TechSpecs browsers={browsers} os={os} devices={devices} />
+      </div>
     </div>
   )
 }

components/dashboard/TechSpecs.tsx

@@ -0,0 +1,90 @@
+'use client'
+
+import { useState } from 'react'
+import { formatNumber } from '@/lib/utils/format'
+
+interface TechSpecsProps {
+  browsers: Array<{ browser: string; pageviews: number }>
+  os: Array<{ os: string; pageviews: number }>
+  devices: Array<{ device: string; pageviews: number }>
+}
+
+type Tab = 'browsers' | 'os' | 'devices'
+
+export default function TechSpecs({ browsers, os, devices }: TechSpecsProps) {
+  const [activeTab, setActiveTab] = useState<Tab>('browsers')
+
+  const renderContent = () => {
+    let data: Array<{ name: string; pageviews: number }> = []
+    
+    if (activeTab === 'browsers') {
+        data = browsers.map(b => ({ name: b.browser, pageviews: b.pageviews }))
+    } else if (activeTab === 'os') {
+        data = os.map(o => ({ name: o.os, pageviews: o.pageviews }))
+    } else if (activeTab === 'devices') {
+        data = devices.map(d => ({ name: d.device, pageviews: d.pageviews }))
+    }
+
+    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((item, 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="truncate">{item.name === 'Unknown' ? 'Unknown' : item.name}</span>
+            </div>
+            <div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
+              {formatNumber(item.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">
+          Technology
+        </h3>
+        <div className="flex p-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg">
+          <button
+            onClick={() => setActiveTab('browsers')}
+            className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
+              activeTab === 'browsers'
+                ? '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'
+            }`}
+          >
+            Browsers
+          </button>
+          <button
+            onClick={() => setActiveTab('os')}
+            className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
+              activeTab === 'os'
+                ? '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'
+            }`}
+          >
+            OS
+          </button>
+          <button
+            onClick={() => setActiveTab('devices')}
+            className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
+              activeTab === 'devices'
+                ? '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'
+            }`}
+          >
+            Devices
+          </button>
+        </div>
+      </div>
+      {renderContent()}
+    </div>
+  )
+}

lib/api/stats.ts

@@ -32,6 +32,21 @@ export interface RegionStat {
   pageviews: number
 }
 
+export interface BrowserStat {
+  browser: string
+  pageviews: number
+}
+
+export interface OSStat {
+  os: string
+  pageviews: number
+}
+
+export interface DeviceStat {
+  device: string
+  pageviews: number
+}
+
 export interface DailyStat {
   date: string
   pageviews: number
@@ -94,6 +109,30 @@ export async function getRegions(siteId: string, startDate?: string, endDate?: s
   return apiRequest<{ regions: RegionStat[] }>(`/sites/${siteId}/regions?${params.toString()}`).then(r => r?.regions || [])
 }
 
+export async function getBrowsers(siteId: string, startDate?: string, endDate?: string, limit = 10): Promise<BrowserStat[]> {
+  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<{ browsers: BrowserStat[] }>(`/sites/${siteId}/browsers?${params.toString()}`).then(r => r?.browsers || [])
+}
+
+export async function getOS(siteId: string, startDate?: string, endDate?: string, limit = 10): Promise<OSStat[]> {
+  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<{ os: OSStat[] }>(`/sites/${siteId}/os?${params.toString()}`).then(r => r?.os || [])
+}
+
+export async function getDevices(siteId: string, startDate?: string, endDate?: string, limit = 10): Promise<DeviceStat[]> {
+  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<{ devices: DeviceStat[] }>(`/sites/${siteId}/devices?${params.toString()}`).then(r => r?.devices || [])
+}
+
 export async function getDailyStats(siteId: string, startDate?: string, endDate?: string): Promise<DailyStat[]> {
   const params = new URLSearchParams()
   if (startDate) params.append('start_date', startDate)