feat: implement site statistics fetching and display in SiteList component
This commit is contained in:
Usman Baig
44
app/page.tsx
44
app/page.tsx
@@ -6,6 +6,8 @@ import { motion } from 'framer-motion'
|
||||
import { useAuth } from '@/lib/auth/context'
|
||||
import { initiateOAuthFlow, initiateSignupFlow } from '@/lib/api/oauth'
|
||||
import { listSites, deleteSite, type Site } from '@/lib/api/sites'
|
||||
import { getStats, getDailyStats } from '@/lib/api/stats'
|
||||
import type { Stats, DailyStat } from '@/lib/api/stats'
|
||||
import { getSubscription, type SubscriptionDetails } from '@/lib/api/billing'
|
||||
import { LoadingOverlay } from '@ciphera-net/ui'
|
||||
import SiteList from '@/components/sites/SiteList'
|
||||
@@ -97,10 +99,13 @@ function ComparisonSection() {
|
||||
}
|
||||
|
||||
|
||||
type SiteStatsMap = Record<string, { stats: Stats; dailyStats: DailyStat[] }>
|
||||
|
||||
export default function HomePage() {
|
||||
const { user, loading: authLoading } = useAuth()
|
||||
const [sites, setSites] = useState<Site[]>([])
|
||||
const [sitesLoading, setSitesLoading] = useState(true)
|
||||
const [siteStats, setSiteStats] = useState<SiteStatsMap>({})
|
||||
const [subscription, setSubscription] = useState<SubscriptionDetails | null>(null)
|
||||
const [subscriptionLoading, setSubscriptionLoading] = useState(false)
|
||||
const [showFinishSetupBanner, setShowFinishSetupBanner] = useState(true)
|
||||
@@ -112,6 +117,37 @@ export default function HomePage() {
|
||||
}
|
||||
}, [user])
|
||||
|
||||
useEffect(() => {
|
||||
if (sites.length === 0) {
|
||||
setSiteStats({})
|
||||
return
|
||||
}
|
||||
let cancelled = false
|
||||
const today = new Date().toISOString().split('T')[0]
|
||||
const start7d = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
|
||||
const load = async () => {
|
||||
const results = await Promise.allSettled(
|
||||
sites.map(async (site) => {
|
||||
const [statsRes, dailyRes] = await Promise.all([
|
||||
getStats(site.id, today, today),
|
||||
getDailyStats(site.id, start7d, today, 'day'),
|
||||
])
|
||||
return { siteId: site.id, stats: statsRes, dailyStats: dailyRes ?? [] }
|
||||
})
|
||||
)
|
||||
if (cancelled) return
|
||||
const map: SiteStatsMap = {}
|
||||
for (const r of results) {
|
||||
if (r.status === 'fulfilled') {
|
||||
map[r.value.siteId] = { stats: r.value.stats, dailyStats: r.value.dailyStats }
|
||||
}
|
||||
}
|
||||
setSiteStats(map)
|
||||
}
|
||||
load()
|
||||
return () => { cancelled = true }
|
||||
}, [sites])
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === 'undefined') return
|
||||
if (localStorage.getItem('pulse_welcome_completed') === 'true') setShowFinishSetupBanner(false)
|
||||
@@ -370,7 +406,11 @@ export default function HomePage() {
|
||||
</div>
|
||||
<div className="rounded-2xl border border-neutral-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900">
|
||||
<p className="text-sm text-neutral-500 dark:text-neutral-400">Total Visitors (24h)</p>
|
||||
<p className="text-2xl font-bold text-neutral-900 dark:text-white">--</p>
|
||||
<p className="text-2xl font-bold text-neutral-900 dark:text-white">
|
||||
{sites.length === 0 || Object.keys(siteStats).length < sites.length
|
||||
? '--'
|
||||
: Object.values(siteStats).reduce((sum, { stats }) => sum + (stats?.visitors ?? 0), 0).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-neutral-200 bg-brand-orange/10 p-4 dark:border-neutral-800">
|
||||
<p className="text-sm text-brand-orange">Plan & usage</p>
|
||||
@@ -456,7 +496,7 @@ export default function HomePage() {
|
||||
)}
|
||||
|
||||
{(sitesLoading || sites.length > 0) && (
|
||||
<SiteList sites={sites} loading={sitesLoading} onDelete={handleDelete} />
|
||||
<SiteList sites={sites} siteStats={siteStats} loading={sitesLoading} onDelete={handleDelete} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -14,6 +14,7 @@ import {
|
||||
} from 'recharts'
|
||||
import type { TooltipProps } from 'recharts'
|
||||
import { formatNumber, formatDuration, formatUpdatedAgo } from '@ciphera-net/ui'
|
||||
import Sparkline from './Sparkline'
|
||||
import { ArrowUpRightIcon, ArrowDownRightIcon, BarChartIcon, Select, Button, DownloadIcon } from '@ciphera-net/ui'
|
||||
import { Checkbox } from '@ciphera-net/ui'
|
||||
|
||||
@@ -208,51 +209,6 @@ function getTrendContext(dateRange: { start: string; end: string }): string {
|
||||
return `vs previous ${days} days`
|
||||
}
|
||||
|
||||
// * Mini sparkline SVG for KPI cards
|
||||
function Sparkline({
|
||||
data,
|
||||
dataKey,
|
||||
color,
|
||||
width = 56,
|
||||
height = 20,
|
||||
}: {
|
||||
data: Array<Record<string, unknown>>
|
||||
dataKey: string
|
||||
color: string
|
||||
width?: number
|
||||
height?: number
|
||||
}) {
|
||||
if (!data.length) return null
|
||||
const values = data.map((d) => Number(d[dataKey] ?? 0))
|
||||
const max = Math.max(...values, 1)
|
||||
const min = Math.min(...values, 0)
|
||||
const range = max - min || 1
|
||||
const padding = 2
|
||||
const w = width - padding * 2
|
||||
const h = height - padding * 2
|
||||
|
||||
const points = values.map((v, i) => {
|
||||
const x = padding + (i / Math.max(values.length - 1, 1)) * w
|
||||
const y = padding + h - ((v - min) / range) * h
|
||||
return `${x},${y}`
|
||||
})
|
||||
|
||||
const pathD = points.length > 1 ? `M ${points.join(' L ')}` : `M ${points[0]} L ${points[0]}`
|
||||
|
||||
return (
|
||||
<svg width={width} height={height} className="flex-shrink-0" aria-hidden>
|
||||
<path
|
||||
d={pathD}
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth={1.5}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Chart({
|
||||
data,
|
||||
prevData,
|
||||
|
||||
50
components/dashboard/Sparkline.tsx
Normal file
50
components/dashboard/Sparkline.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
'use client'
|
||||
|
||||
/**
|
||||
* Mini sparkline SVG for KPI cards.
|
||||
* Renders a line chart from an array of data points.
|
||||
*/
|
||||
export default function Sparkline({
|
||||
data,
|
||||
dataKey,
|
||||
color,
|
||||
width = 56,
|
||||
height = 20,
|
||||
}: {
|
||||
/** Array of objects with numeric values (e.g. DailyStat with visitors, pageviews) */
|
||||
data: ReadonlyArray<object>
|
||||
dataKey: string
|
||||
color: string
|
||||
width?: number
|
||||
height?: number
|
||||
}) {
|
||||
if (!data.length) return null
|
||||
const values = data.map((d) => Number((d as Record<string, unknown>)[dataKey] ?? 0))
|
||||
const max = Math.max(...values, 1)
|
||||
const min = Math.min(...values, 0)
|
||||
const range = max - min || 1
|
||||
const padding = 2
|
||||
const w = width - padding * 2
|
||||
const h = height - padding * 2
|
||||
|
||||
const points = values.map((v, i) => {
|
||||
const x = padding + (i / Math.max(values.length - 1, 1)) * w
|
||||
const y = padding + h - ((v - min) / range) * h
|
||||
return `${x},${y}`
|
||||
})
|
||||
|
||||
const pathD = points.length > 1 ? `M ${points.join(' L ')}` : `M ${points[0]} L ${points[0]}`
|
||||
|
||||
return (
|
||||
<svg width={width} height={height} className="flex-shrink-0" aria-hidden>
|
||||
<path
|
||||
d={pathD}
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth={1.5}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@@ -2,17 +2,124 @@
|
||||
|
||||
import Link from 'next/link'
|
||||
import { Site } from '@/lib/api/sites'
|
||||
import type { Stats, DailyStat } from '@/lib/api/stats'
|
||||
import { formatNumber } from '@ciphera-net/ui'
|
||||
import { BarChartIcon, SettingsIcon, BookOpenIcon, ExternalLinkIcon, Button } from '@ciphera-net/ui'
|
||||
import { useAuth } from '@/lib/auth/context'
|
||||
import Sparkline from '@/components/dashboard/Sparkline'
|
||||
|
||||
export type SiteStatsMap = Record<string, { stats: Stats; dailyStats: DailyStat[] }>
|
||||
|
||||
interface SiteListProps {
|
||||
sites: Site[]
|
||||
siteStats: SiteStatsMap
|
||||
loading: boolean
|
||||
onDelete: (id: string) => void
|
||||
}
|
||||
|
||||
export default function SiteList({ sites, loading, onDelete }: SiteListProps) {
|
||||
interface SiteCardProps {
|
||||
site: Site
|
||||
stats: Stats | null
|
||||
dailyStats: DailyStat[]
|
||||
statsLoading: boolean
|
||||
onDelete: (id: string) => void
|
||||
canDelete: boolean
|
||||
}
|
||||
|
||||
function SiteCard({ site, stats, dailyStats, statsLoading, onDelete, canDelete }: SiteCardProps) {
|
||||
const visitors24h = stats?.visitors ?? 0
|
||||
const pageviews = stats?.pageviews ?? 0
|
||||
const hasChartData = dailyStats.length > 0
|
||||
const sparklineColor = 'var(--color-brand-orange)'
|
||||
|
||||
return (
|
||||
<div className="group relative flex flex-col rounded-2xl border border-neutral-200 bg-white p-6 shadow-sm transition-all hover:shadow-md dark:border-neutral-800 dark:bg-neutral-900">
|
||||
{/* Header: Icon + Name + Live Status */}
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="h-12 w-12 overflow-hidden rounded-lg border border-neutral-100 bg-neutral-50 p-1 dark:border-neutral-800 dark:bg-neutral-800">
|
||||
<img
|
||||
src={`https://www.google.com/s2/favicons?domain=${site.domain}&sz=64`}
|
||||
alt={site.name}
|
||||
className="h-full w-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 dark:text-white">{site.name}</h3>
|
||||
<div className="flex items-center gap-1 text-sm text-neutral-500 dark:text-neutral-400">
|
||||
{site.domain}
|
||||
<a
|
||||
href={`https://${site.domain}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<ExternalLinkIcon className="h-3 w-3" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 dark:bg-green-900/20 dark:text-green-400">
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
|
||||
</span>
|
||||
Active
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mini Stats Grid + KPI Chart */}
|
||||
<div className="mb-6 rounded-lg bg-neutral-50 p-3 dark:bg-neutral-800/50">
|
||||
<div className="grid grid-cols-2 gap-4 mb-3">
|
||||
<div>
|
||||
<p className="text-xs text-neutral-500">Visitors (24h)</p>
|
||||
<p className="font-mono text-lg font-medium text-neutral-900 dark:text-white">
|
||||
{statsLoading ? '--' : formatNumber(visitors24h)}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-neutral-500">Pageviews</p>
|
||||
<p className="font-mono text-lg font-medium text-neutral-900 dark:text-white">
|
||||
{statsLoading ? '--' : formatNumber(pageviews)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{hasChartData && (
|
||||
<div className="flex items-center gap-2 pt-2 border-t border-neutral-200 dark:border-neutral-700">
|
||||
<Sparkline data={dailyStats} dataKey="visitors" color={sparklineColor} width={120} height={32} />
|
||||
<span className="text-xs text-neutral-500">7d visitors</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="mt-auto flex gap-2">
|
||||
<Link href={`/sites/${site.id}`} className="flex-1">
|
||||
<Button variant="primary" className="w-full justify-center text-sm">
|
||||
<BarChartIcon className="w-4 h-4" />
|
||||
View Dashboard
|
||||
</Button>
|
||||
</Link>
|
||||
{canDelete && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onDelete(site.id)}
|
||||
className="flex items-center justify-center rounded-lg border border-neutral-200 px-3 hover:bg-neutral-50 dark:border-neutral-700 dark:hover:bg-neutral-800 text-neutral-500 hover:text-red-600 dark:hover:text-red-400 transition-colors focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
|
||||
title="Delete Site"
|
||||
>
|
||||
<SettingsIcon className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function SiteList({ sites, siteStats, loading, onDelete }: SiteListProps) {
|
||||
const { user } = useAuth()
|
||||
const canDelete = user?.role === 'owner' || user?.role === 'admin'
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
@@ -40,85 +147,20 @@ export default function SiteList({ sites, loading, onDelete }: SiteListProps) {
|
||||
|
||||
return (
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{sites.map((site) => (
|
||||
<div
|
||||
key={site.id}
|
||||
className="group relative flex flex-col rounded-2xl border border-neutral-200 bg-white p-6 shadow-sm transition-all hover:shadow-md dark:border-neutral-800 dark:bg-neutral-900"
|
||||
>
|
||||
{/* Header: Icon + Name + Live Status */}
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Auto-fetch favicon */}
|
||||
<div className="h-12 w-12 overflow-hidden rounded-lg border border-neutral-100 bg-neutral-50 p-1 dark:border-neutral-800 dark:bg-neutral-800">
|
||||
<img
|
||||
src={`https://www.google.com/s2/favicons?domain=${site.domain}&sz=64`}
|
||||
alt={site.name}
|
||||
className="h-full w-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-neutral-900 dark:text-white">{site.name}</h3>
|
||||
<div className="flex items-center gap-1 text-sm text-neutral-500 dark:text-neutral-400">
|
||||
{site.domain}
|
||||
<a
|
||||
href={`https://${site.domain}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<ExternalLinkIcon className="h-3 w-3" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* "Live" Indicator */}
|
||||
<div className="flex items-center gap-2 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 dark:bg-green-900/20 dark:text-green-400">
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
|
||||
</span>
|
||||
Active
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mini Stats Grid */}
|
||||
<div className="mb-6 grid grid-cols-2 gap-4 rounded-lg bg-neutral-50 p-3 dark:bg-neutral-800/50">
|
||||
<div>
|
||||
<p className="text-xs text-neutral-500">Visitors (24h)</p>
|
||||
<p className="font-mono text-lg font-medium text-neutral-900 dark:text-white">--</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-neutral-500">Pageviews</p>
|
||||
<p className="font-mono text-lg font-medium text-neutral-900 dark:text-white">--</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="mt-auto flex gap-2">
|
||||
<Link
|
||||
href={`/sites/${site.id}`}
|
||||
className="flex-1"
|
||||
>
|
||||
<Button variant="primary" className="w-full justify-center text-sm">
|
||||
<BarChartIcon className="w-4 h-4" />
|
||||
View Dashboard
|
||||
</Button>
|
||||
</Link>
|
||||
{(user?.role === 'owner' || user?.role === 'admin') && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onDelete(site.id)}
|
||||
className="flex items-center justify-center rounded-lg border border-neutral-200 px-3 hover:bg-neutral-50 dark:border-neutral-700 dark:hover:bg-neutral-800 text-neutral-500 hover:text-red-600 dark:hover:text-red-400 transition-colors focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
|
||||
title="Delete Site"
|
||||
>
|
||||
<SettingsIcon className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{sites.map((site) => {
|
||||
const data = siteStats[site.id]
|
||||
return (
|
||||
<SiteCard
|
||||
key={site.id}
|
||||
site={site}
|
||||
stats={data?.stats ?? null}
|
||||
dailyStats={data?.dailyStats ?? []}
|
||||
statsLoading={!data}
|
||||
onDelete={onDelete}
|
||||
canDelete={canDelete}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Resources Card */}
|
||||
<div className="flex flex-col items-center justify-center rounded-2xl border border-dashed border-neutral-300 bg-neutral-50 p-6 text-center dark:border-neutral-700 dark:bg-neutral-900/50">
|
||||
|
||||
Reference in New Issue
Block a user