From 46084b71a65cd1223667b10ade81c3330dd6251f Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 12 Mar 2026 16:54:38 +0100
Subject: [PATCH] feat: add frustration table component with view-all modal

---
 components/behavior/FrustrationTable.tsx | 177 +++++++++++++++++++++++
 1 file changed, 177 insertions(+)
 create mode 100644 components/behavior/FrustrationTable.tsx

diff --git a/components/behavior/FrustrationTable.tsx b/components/behavior/FrustrationTable.tsx
new file mode 100644
index 0000000..13e1276
--- /dev/null
+++ b/components/behavior/FrustrationTable.tsx
@@ -0,0 +1,177 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { formatNumber, Modal } from '@ciphera-net/ui'
+import { FrameCornersIcon } from '@phosphor-icons/react'
+import type { FrustrationElement } from '@/lib/api/stats'
+import { ListSkeleton } from '@/components/skeletons'
+
+interface FrustrationTableProps {
+  title: string
+  description: string
+  items: FrustrationElement[]
+  total: number
+  showAvgClicks?: boolean
+  loading: boolean
+  fetchAll?: () => Promise<{ items: FrustrationElement[]; total: number }>
+}
+
+function SkeletonRows() {
+  return (
+    <div className="space-y-2">
+      {Array.from({ length: 5 }).map((_, i) => (
+        <div key={i} className="animate-pulse flex items-center justify-between h-9 px-2">
+          <div className="flex items-center gap-3 flex-1">
+            <div className="h-4 w-32 bg-neutral-200 dark:bg-neutral-700 rounded" />
+            <div className="h-3 w-20 bg-neutral-200 dark:bg-neutral-700 rounded" />
+          </div>
+          <div className="h-4 w-10 bg-neutral-200 dark:bg-neutral-700 rounded" />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function Row({
+  item,
+  showAvgClicks,
+}: {
+  item: FrustrationElement
+  showAvgClicks?: boolean
+}) {
+  return (
+    <div className="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">
+      <div className="flex items-center gap-3 flex-1 min-w-0">
+        <span
+          className="text-sm font-mono text-neutral-900 dark:text-white truncate max-w-[200px]"
+          title={item.selector}
+        >
+          {item.selector}
+        </span>
+        <span
+          className="text-xs text-neutral-400 dark:text-neutral-500 truncate max-w-[140px]"
+          title={item.page_path}
+        >
+          {item.page_path}
+        </span>
+      </div>
+      <div className="flex items-center gap-4 ml-4 shrink-0">
+        {showAvgClicks && item.avg_click_count != null && (
+          <span className="text-xs text-neutral-400 dark:text-neutral-500 tabular-nums">
+            avg {item.avg_click_count.toFixed(1)}
+          </span>
+        )}
+        <span className="text-xs text-neutral-400 dark:text-neutral-500 tabular-nums">
+          {item.sessions} {item.sessions === 1 ? 'session' : 'sessions'}
+        </span>
+        <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 tabular-nums">
+          {formatNumber(item.count)}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+export default function FrustrationTable({
+  title,
+  description,
+  items,
+  total,
+  showAvgClicks,
+  loading,
+  fetchAll,
+}: FrustrationTableProps) {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [fullData, setFullData] = useState<FrustrationElement[]>([])
+  const [isLoadingFull, setIsLoadingFull] = useState(false)
+  const hasData = items.length > 0
+  const showViewAll = hasData && total > items.length
+
+  useEffect(() => {
+    if (isModalOpen && fetchAll) {
+      const load = async () => {
+        setIsLoadingFull(true)
+        try {
+          const result = await fetchAll()
+          setFullData(result.items)
+        } catch {
+          // silent
+        } finally {
+          setIsLoadingFull(false)
+        }
+      }
+      load()
+    } else {
+      setFullData([])
+    }
+  }, [isModalOpen, fetchAll])
+
+  return (
+    <>
+      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
+        <div className="flex items-center justify-between mb-1">
+          <div className="flex items-center gap-2">
+            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+              {title}
+            </h3>
+            {showViewAll && (
+              <button
+                onClick={() => setIsModalOpen(true)}
+                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
+                aria-label={`View all ${title.toLowerCase()}`}
+              >
+                <FrameCornersIcon className="w-4 h-4" weight="bold" />
+              </button>
+            )}
+          </div>
+        </div>
+        <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-4">
+          {description}
+        </p>
+
+        <div className="flex-1 min-h-[200px]">
+          {loading ? (
+            <SkeletonRows />
+          ) : hasData ? (
+            <div className="space-y-0.5">
+              {items.map((item, i) => (
+                <Row key={`${item.selector}-${item.page_path}-${i}`} item={item} showAvgClicks={showAvgClicks} />
+              ))}
+            </div>
+          ) : (
+            <div className="h-full flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
+              <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                No {title.toLowerCase()} detected in this period
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <Modal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        title={title}
+        className="max-w-2xl"
+      >
+        <div className="max-h-[80vh] overflow-y-auto">
+          {isLoadingFull ? (
+            <div className="py-4">
+              <ListSkeleton rows={10} />
+            </div>
+          ) : fullData.length > 0 ? (
+            <div className="space-y-0.5">
+              {fullData.map((item, i) => (
+                <Row key={`${item.selector}-${item.page_path}-${i}`} item={item} showAvgClicks={showAvgClicks} />
+              ))}
+            </div>
+          ) : (
+            <p className="text-sm text-neutral-500 dark:text-neutral-400 py-8 text-center">
+              No data available
+            </p>
+          )}
+        </div>
+      </Modal>
+    </>
+  )
+}