refactor: simplify site statistics fetching by removing daily stats and updating related components

This commit is contained in:
Usman Baig
2026-02-22 00:25:36 +01:00
parent ccefdcc384
commit a2419d681c
2 changed files with 23 additions and 40 deletions

View File

@@ -6,8 +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 { getStats } from '@/lib/api/stats'
import type { Stats } from '@/lib/api/stats'
import { getSubscription, type SubscriptionDetails } from '@/lib/api/billing'
import { LoadingOverlay } from '@ciphera-net/ui'
import SiteList from '@/components/sites/SiteList'
@@ -99,7 +99,7 @@ function ComparisonSection() {
}
type SiteStatsMap = Record<string, { stats: Stats; dailyStats: DailyStat[] }>
type SiteStatsMap = Record<string, { stats: Stats }>
export default function HomePage() {
const { user, loading: authLoading } = useAuth()
@@ -124,16 +124,12 @@ export default function HomePage() {
}
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 emptyStats: Stats = { pageviews: 0, visitors: 0, bounce_rate: 0, avg_duration: 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 ?? [] }
const statsRes = await getStats(site.id, today, today)
return { siteId: site.id, stats: statsRes }
})
)
if (cancelled) return
@@ -141,9 +137,9 @@ export default function HomePage() {
results.forEach((r, i) => {
const site = sites[i]
if (r.status === 'fulfilled') {
map[site.id] = { stats: r.value.stats, dailyStats: r.value.dailyStats }
map[site.id] = { stats: r.value.stats }
} else {
map[site.id] = { stats: emptyStats, dailyStats: [] }
map[site.id] = { stats: emptyStats }
}
})
setSiteStats(map)

View File

@@ -2,13 +2,12 @@
import Link from 'next/link'
import { Site } from '@/lib/api/sites'
import type { Stats, DailyStat } from '@/lib/api/stats'
import type { Stats } 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[] }>
export type SiteStatsMap = Record<string, { stats: Stats }>
interface SiteListProps {
sites: Site[]
@@ -20,17 +19,14 @@ interface 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) {
function SiteCard({ site, stats, 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">
@@ -70,28 +66,20 @@ function SiteCard({ site, stats, dailyStats, statsLoading, onDelete, canDelete }
</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>
{/* 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">
{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>
{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 */}
@@ -154,7 +142,6 @@ export default function SiteList({ sites, siteStats, loading, onDelete }: SiteLi
key={site.id}
site={site}
stats={data?.stats ?? null}
dailyStats={data?.dailyStats ?? []}
statsLoading={!data}
onDelete={onDelete}
canDelete={canDelete}