feat: add frustration summary cards component

components/behavior/FrustrationSummaryCards.tsx

@@ -0,0 +1,119 @@
+'use client'
+
+import type { FrustrationSummary } from '@/lib/api/stats'
+
+interface FrustrationSummaryCardsProps {
+  data: FrustrationSummary | null
+  loading: boolean
+}
+
+function pctChange(current: number, previous: number): number | null {
+  if (previous === 0 && current === 0) return null
+  if (previous === 0) return 100
+  return Math.round(((current - previous) / previous) * 100)
+}
+
+function ChangeIndicator({ change }: { change: number | null }) {
+  if (change === null) return null
+  const isUp = change > 0
+  const isDown = change < 0
+  return (
+    <span
+      className={`text-xs font-medium ${
+        isUp
+          ? 'text-red-600 dark:text-red-400'
+          : isDown
+            ? 'text-green-600 dark:text-green-400'
+            : 'text-neutral-500 dark:text-neutral-400'
+      }`}
+    >
+      {isUp ? '+' : ''}{change}%
+    </span>
+  )
+}
+
+function SkeletonCard() {
+  return (
+    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
+      <div className="animate-pulse space-y-3">
+        <div className="h-4 w-24 bg-neutral-200 dark:bg-neutral-700 rounded" />
+        <div className="h-8 w-16 bg-neutral-200 dark:bg-neutral-700 rounded" />
+        <div className="h-3 w-32 bg-neutral-200 dark:bg-neutral-700 rounded" />
+      </div>
+    </div>
+  )
+}
+
+export default function FrustrationSummaryCards({ data, loading }: FrustrationSummaryCardsProps) {
+  if (loading || !data) {
+    return (
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+      </div>
+    )
+  }
+
+  const rageChange = pctChange(data.rage_clicks, data.prev_rage_clicks)
+  const deadChange = pctChange(data.dead_clicks, data.prev_dead_clicks)
+  const topPage = data.rage_top_page || data.dead_top_page
+  const topPageTotal = data.rage_clicks + data.dead_clicks
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
+      {/* Rage Clicks */}
+      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
+        <p className="text-sm font-medium text-neutral-500 dark:text-neutral-400 mb-1">
+          Rage Clicks
+        </p>
+        <div className="flex items-baseline gap-2">
+          <span className="text-2xl font-bold text-neutral-900 dark:text-white tabular-nums">
+            {data.rage_clicks.toLocaleString()}
+          </span>
+          <ChangeIndicator change={rageChange} />
+        </div>
+        <p className="text-xs text-neutral-400 dark:text-neutral-500 mt-1">
+          {data.rage_unique_elements} unique elements
+        </p>
+      </div>
+
+      {/* Dead Clicks */}
+      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
+        <p className="text-sm font-medium text-neutral-500 dark:text-neutral-400 mb-1">
+          Dead Clicks
+        </p>
+        <div className="flex items-baseline gap-2">
+          <span className="text-2xl font-bold text-neutral-900 dark:text-white tabular-nums">
+            {data.dead_clicks.toLocaleString()}
+          </span>
+          <ChangeIndicator change={deadChange} />
+        </div>
+        <p className="text-xs text-neutral-400 dark:text-neutral-500 mt-1">
+          {data.dead_unique_elements} unique elements
+        </p>
+      </div>
+
+      {/* Most Frustrated Page */}
+      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
+        <p className="text-sm font-medium text-neutral-500 dark:text-neutral-400 mb-1">
+          Most Frustrated Page
+        </p>
+        {topPage ? (
+          <>
+            <p className="text-lg font-bold text-neutral-900 dark:text-white truncate" title={topPage}>
+              {topPage}
+            </p>
+            <p className="text-xs text-neutral-400 dark:text-neutral-500 mt-1">
+              {topPageTotal.toLocaleString()} total signals
+            </p>
+          </>
+        ) : (
+          <p className="text-sm text-neutral-400 dark:text-neutral-500 mt-2">
+            No data in this period
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}