5a03e1f9a5
- PageSpeed: show 4 gauge rings, screenshot, legend, metrics grid, trend chart - Uptime: match real layout with status card, 90-day bar, 4-col detail grid - Remove duplicate local skeletons in behavior components, use shared library - Strip light-mode classes from dark-only app
101 lines
4.2 KiB
TypeScript
101 lines
4.2 KiB
TypeScript
'use client'
|
|
|
|
import { formatNumber } from '@ciphera-net/ui'
|
|
import { Files } from '@phosphor-icons/react'
|
|
import type { FrustrationByPage } from '@/lib/api/stats'
|
|
import { TableSkeleton } from '@/components/skeletons'
|
|
|
|
interface FrustrationByPageTableProps {
|
|
pages: FrustrationByPage[]
|
|
loading: boolean
|
|
}
|
|
|
|
export default function FrustrationByPageTable({ pages, loading }: FrustrationByPageTableProps) {
|
|
const hasData = pages.length > 0
|
|
const maxTotal = Math.max(...pages.map(p => p.total), 1)
|
|
|
|
return (
|
|
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 mb-8">
|
|
<div className="flex items-center justify-between mb-1">
|
|
<h3 className="text-lg font-semibold text-white">
|
|
Frustration by Page
|
|
</h3>
|
|
</div>
|
|
<p className="text-sm text-neutral-400 mb-4">
|
|
Pages with the most frustration signals
|
|
</p>
|
|
|
|
{loading ? (
|
|
<TableSkeleton rows={5} cols={5} />
|
|
) : hasData ? (
|
|
<div className="overflow-x-auto -mx-6 px-6">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between px-2 -mx-2 mb-2 text-xs font-medium text-neutral-400 dark:text-neutral-500 uppercase tracking-wider">
|
|
<span>Page</span>
|
|
<div className="flex items-center gap-6">
|
|
<span className="w-12 text-right">Rage</span>
|
|
<span className="w-12 text-right">Dead</span>
|
|
<span className="w-12 text-right">Total</span>
|
|
<span className="w-16 text-right">Elements</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Rows */}
|
|
<div className="space-y-0.5">
|
|
{pages.map((page) => {
|
|
const barWidth = (page.total / maxTotal) * 75
|
|
return (
|
|
<div
|
|
key={page.page_path}
|
|
className="relative 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"
|
|
>
|
|
{/* Background bar */}
|
|
<div
|
|
className="absolute inset-y-0 left-0 bg-brand-orange/15 dark:bg-brand-orange/25 rounded-lg transition-all"
|
|
style={{ width: `${barWidth}%` }}
|
|
/>
|
|
<span
|
|
className="relative text-sm text-white truncate max-w-[200px] sm:max-w-[300px]"
|
|
title={page.page_path}
|
|
>
|
|
{page.page_path}
|
|
</span>
|
|
<div className="relative flex items-center gap-6">
|
|
<span className="w-12 text-right text-sm tabular-nums text-neutral-600 dark:text-neutral-400">
|
|
{formatNumber(page.rage_clicks)}
|
|
</span>
|
|
<span className="w-12 text-right text-sm tabular-nums text-neutral-600 dark:text-neutral-400">
|
|
{formatNumber(page.dead_clicks)}
|
|
</span>
|
|
<span className="w-12 text-right text-sm font-semibold tabular-nums text-white">
|
|
{formatNumber(page.total)}
|
|
</span>
|
|
<span className="w-16 text-right text-sm tabular-nums text-neutral-600 dark:text-neutral-400">
|
|
{page.unique_elements}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col items-center justify-center text-center px-6 py-8 gap-4 min-h-[200px]">
|
|
<div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
|
|
<Files className="w-8 h-8 text-neutral-400" />
|
|
</div>
|
|
<h4 className="font-semibold text-white">
|
|
No frustration signals detected
|
|
</h4>
|
|
<p className="text-sm text-neutral-400 max-w-md">
|
|
Page-level frustration data will appear here once rage clicks or dead clicks are detected on your site.
|
|
</p>
|
|
<a href="/installation" target="_blank" rel="noopener noreferrer" className="mt-1 text-sm font-medium text-brand-orange hover:underline">
|
|
View setup guide
|
|
</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|