From f469d0d755c67941aa93e7037d8256f8a3e203e4 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 4 Mar 2026 21:09:20 +0100
Subject: [PATCH 01/28] chore: bump @ciphera-net/ui to ^0.0.80

---
 package-lock.json | 12 ++++++------
 package.json      |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2a7e9b6..67de8f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,14 +1,14 @@
 {
   "name": "pulse-frontend",
-  "version": "0.12.0-alpha",
+  "version": "0.13.0-alpha",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pulse-frontend",
-      "version": "0.12.0-alpha",
+      "version": "0.13.0-alpha",
       "dependencies": {
-        "@ciphera-net/ui": "^0.0.79",
+        "@ciphera-net/ui": "^0.0.80",
         "@ducanh2912/next-pwa": "^10.2.9",
         "@radix-ui/react-icons": "^1.3.0",
         "@simplewebauthn/browser": "^13.2.2",
@@ -1665,9 +1665,9 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.0.79",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.79/11371f19607016d14b0343a698d5f2ef22360c0c",
-      "integrity": "sha512-Th7jVpsf2Qjf5o8ZP1315xJ4q09fb3zo5rPwAiK7jQZGl9AIZU8qw33wJchDKJU7dwo9YetKFvP60lnqseadnA==",
+      "version": "0.0.80",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.80/0fc38c4004f3d899afffa8c15addc490b72efe15",
+      "integrity": "sha512-/Jc0aTEE94YA+V/FbpCK133IYbwp/rPpr1a/pdhIG54OzMzVnaRndaVpNLpmLB2Y7POmRTecJr831L1DUrI4WQ==",
       "dependencies": {
         "@radix-ui/react-icons": "^1.3.0",
         "clsx": "^2.1.0",
diff --git a/package.json b/package.json
index a0770a2..0c03c2d 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.0.79",
+    "@ciphera-net/ui": "^0.0.80",
     "@ducanh2912/next-pwa": "^10.2.9",
     "@radix-ui/react-icons": "^1.3.0",
     "@simplewebauthn/browser": "^13.2.2",

From 48cf9a1f62bc0c474c2fa30f85303b4fe6ba4f27 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 5 Mar 2026 22:16:36 +0100
Subject: [PATCH 02/28] feat: replace settings page with SettingsModal

- Add SettingsModalProvider context and SettingsModalWrapper
- Wire Header onOpenSettings callback via LayoutInner pattern
- Remove old /settings page and SettingsPageClient
- Bump @ciphera-net/ui to ^0.0.88
---
 app/layout-content.tsx                       |  25 +-
 app/settings/SettingsPageClient.tsx          | 532 -------------------
 app/settings/page.tsx                        |  14 -
 components/settings/SettingsModalWrapper.tsx | 186 +++++++
 lib/settings-modal-context.tsx               |  31 ++
 package-lock.json                            |   8 +-
 package.json                                 |   2 +-
 7 files changed, 241 insertions(+), 557 deletions(-)
 delete mode 100644 app/settings/SettingsPageClient.tsx
 delete mode 100644 app/settings/page.tsx
 create mode 100644 components/settings/SettingsModalWrapper.tsx
 create mode 100644 lib/settings-modal-context.tsx

diff --git a/app/layout-content.tsx b/app/layout-content.tsx
index 8ef4acd..e5f2caa 100644
--- a/app/layout-content.tsx
+++ b/app/layout-content.tsx
@@ -13,6 +13,8 @@ import { getUserOrganizations, switchContext, type OrganizationMember } from '@/
 import { setSessionAction } from '@/app/actions/auth'
 import { LoadingOverlay } from '@ciphera-net/ui'
 import { useRouter } from 'next/navigation'
+import { SettingsModalProvider, useSettingsModal } from '@/lib/settings-modal-context'
+import SettingsModalWrapper from '@/components/settings/SettingsModalWrapper'
 
 const ORG_SWITCH_KEY = 'pulse_switching_org'
 
@@ -44,10 +46,11 @@ const CIPHERA_APPS: CipheraApp[] = [
   },
 ]
 
-export default function LayoutContent({ children }: { children: React.ReactNode }) {
+function LayoutInner({ children }: { children: React.ReactNode }) {
   const auth = useAuth()
   const router = useRouter()
   const isOnline = useOnlineStatus()
+  const { openSettings } = useSettingsModal()
   const [orgs, setOrgs] = useState<OrganizationMember[]>([])
   const [isSwitchingOrg, setIsSwitchingOrg] = useState(() => {
     if (typeof window === 'undefined') return false
@@ -87,7 +90,7 @@ export default function LayoutContent({ children }: { children: React.ReactNode
   const handleCreateOrganization = () => {
     router.push('/onboarding')
   }
-  
+
   const showOfflineBar = Boolean(auth.user && !isOnline);
   const barHeightRem = 2.5;
   const headerHeightRem = 6;
@@ -100,9 +103,9 @@ export default function LayoutContent({ children }: { children: React.ReactNode
   return (
     <>
       {auth.user && <OfflineBanner isOnline={isOnline} />}
-      <Header 
-        auth={auth} 
-        LinkComponent={Link} 
+      <Header
+        auth={auth}
+        LinkComponent={Link}
         logoSrc="/pulse_icon_no_margins.png"
         appName="Pulse"
         orgs={orgs}
@@ -117,6 +120,7 @@ export default function LayoutContent({ children }: { children: React.ReactNode
         rightSideActions={auth.user ? <NotificationCenter /> : null}
         apps={CIPHERA_APPS}
         currentAppId="pulse"
+        onOpenSettings={openSettings}
         customNavItems={
           <>
             {!auth.user && (
@@ -136,11 +140,20 @@ export default function LayoutContent({ children }: { children: React.ReactNode
       >
         {children}
       </main>
-      <Footer 
+      <Footer
         LinkComponent={Link}
         appName="Pulse"
         isAuthenticated={!!auth.user}
       />
+      <SettingsModalWrapper />
     </>
   )
 }
+
+export default function LayoutContent({ children }: { children: React.ReactNode }) {
+  return (
+    <SettingsModalProvider>
+      <LayoutInner>{children}</LayoutInner>
+    </SettingsModalProvider>
+  )
+}
diff --git a/app/settings/SettingsPageClient.tsx b/app/settings/SettingsPageClient.tsx
deleted file mode 100644
index 5cb7464..0000000
--- a/app/settings/SettingsPageClient.tsx
+++ /dev/null
@@ -1,532 +0,0 @@
-'use client'
-
-import { useState, useEffect } from 'react'
-import Link from 'next/link'
-import { useAuth } from '@/lib/auth/context'
-import ProfileSettings from '@/components/settings/ProfileSettings'
-import TrustedDevicesCard from '@/components/settings/TrustedDevicesCard'
-import SecurityActivityCard from '@/components/settings/SecurityActivityCard'
-import { updateUserPreferences } from '@/lib/api/user'
-import { motion, AnimatePresence } from 'framer-motion'
-import {
-  UserIcon,
-  LockIcon,
-  BoxIcon,
-  ChevronRightIcon,
-  ChevronDownIcon,
-  ExternalLinkIcon,
-} from '@ciphera-net/ui'
-
-// Inline SVG icons not available in ciphera-ui
-function BellIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
-      <path d="M13.73 21a2 2 0 0 1-3.46 0" />
-    </svg>
-  )
-}
-
-// --- Types ---
-
-type ProfileSubTab = 'profile' | 'security' | 'preferences'
-type NotificationSubTab = 'security' | 'center'
-
-type ActiveSelection =
-  | { section: 'profile'; subTab: ProfileSubTab }
-  | { section: 'notifications'; subTab: NotificationSubTab }
-  | { section: 'account' }
-  | { section: 'devices' }
-  | { section: 'activity' }
-
-type ExpandableSection = 'profile' | 'notifications' | 'account'
-
-// --- Sidebar Components ---
-
-function SectionHeader({
-  expanded,
-  active,
-  onToggle,
-  icon: Icon,
-  label,
-  description,
-  hasChildren = true,
-}: {
-  expanded: boolean
-  active: boolean
-  onToggle: () => void
-  icon: React.ElementType
-  label: string
-  description?: string
-  hasChildren?: boolean
-}) {
-  return (
-    <button
-      onClick={onToggle}
-      className={`w-full flex items-start gap-3 px-4 py-3 text-left rounded-xl transition-all duration-200 ${
-        active
-          ? 'bg-brand-orange/10 text-brand-orange'
-          : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-      }`}
-    >
-      <Icon className="w-5 h-5 mt-0.5 shrink-0" />
-      <div className="flex-1 min-w-0">
-        <span className="font-medium">{label}</span>
-        {description && (
-          <p className={`text-xs mt-0.5 ${active ? 'text-brand-orange/70' : 'text-neutral-500'}`}>
-            {description}
-          </p>
-        )}
-      </div>
-      {hasChildren ? (
-        <ChevronDownIcon
-          className={`w-4 h-4 shrink-0 mt-1 transition-transform duration-200 ${
-            expanded ? '' : '-rotate-90'
-          }`}
-        />
-      ) : (
-        <ChevronRightIcon className={`w-4 h-4 shrink-0 mt-1 transition-transform ${active ? 'rotate-90' : ''}`} />
-      )}
-    </button>
-  )
-}
-
-function SubItem({
-  active,
-  onClick,
-  label,
-  external = false,
-}: {
-  active: boolean
-  onClick: () => void
-  label: string
-  external?: boolean
-}) {
-  return (
-    <button
-      onClick={onClick}
-      className={`w-full flex items-center gap-2.5 pl-12 pr-4 py-2 text-sm text-left rounded-lg transition-all duration-150 ${
-        active
-          ? 'text-brand-orange font-medium bg-brand-orange/5'
-          : 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-50 dark:hover:bg-neutral-800/50'
-      }`}
-    >
-      <span className="flex-1">{label}</span>
-      {external && <ExternalLinkIcon className="w-3 h-3 opacity-60" />}
-    </button>
-  )
-}
-
-function ExpandableSubItems({ expanded, children }: { expanded: boolean; children: React.ReactNode }) {
-  return (
-    <AnimatePresence initial={false}>
-      {expanded && (
-        <motion.div
-          initial={{ height: 0, opacity: 0 }}
-          animate={{ height: 'auto', opacity: 1 }}
-          exit={{ height: 0, opacity: 0 }}
-          transition={{ duration: 0.2, ease: 'easeInOut' }}
-          className="overflow-hidden"
-        >
-          <div className="py-1 space-y-0.5">
-            {children}
-          </div>
-        </motion.div>
-      )}
-    </AnimatePresence>
-  )
-}
-
-// --- Content Components ---
-
-// Security Alerts Card (granular security toggles)
-const SECURITY_ALERT_OPTIONS = [
-  { key: 'login_alerts', label: 'Login Activity', description: 'New device sign-ins and suspicious login attempts.' },
-  { key: 'password_alerts', label: 'Password Changes', description: 'Password changes and session revocations.' },
-  { key: 'two_factor_alerts', label: 'Two-Factor Authentication', description: '2FA enabled/disabled and recovery code changes.' },
-]
-
-function SecurityAlertsCard() {
-  const { user } = useAuth()
-  const [emailNotifications, setEmailNotifications] = useState<Record<string, boolean>>({})
-
-  useEffect(() => {
-    if (user?.preferences?.email_notifications) {
-      setEmailNotifications(user.preferences.email_notifications)
-    } else {
-      const defaults = SECURITY_ALERT_OPTIONS.reduce((acc, option) => ({
-        ...acc,
-        [option.key]: true
-      }), {} as Record<string, boolean>)
-      setEmailNotifications(defaults)
-    }
-  }, [user])
-
-  const handleToggle = async (key: string) => {
-    const newState = {
-      ...emailNotifications,
-      [key]: !emailNotifications[key]
-    }
-    setEmailNotifications(newState)
-    try {
-      await updateUserPreferences({
-        email_notifications: newState as { new_file_received: boolean; file_downloaded: boolean; login_alerts: boolean; password_alerts: boolean; two_factor_alerts: boolean }
-      })
-    } catch {
-      setEmailNotifications(prev => ({
-        ...prev,
-        [key]: !prev[key]
-      }))
-    }
-  }
-
-  return (
-    <div className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-6 shadow-sm">
-      <div className="flex items-center gap-3 mb-6">
-        <div className="p-2 rounded-lg bg-brand-orange/10">
-          <BellIcon className="w-5 h-5 text-brand-orange" />
-        </div>
-        <div>
-          <h2 className="text-lg font-semibold text-neutral-900 dark:text-white">Security Alerts</h2>
-          <p className="text-sm text-neutral-500">Choose which security events trigger email alerts</p>
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        {SECURITY_ALERT_OPTIONS.map((item) => (
-          <div
-            key={item.key}
-            className={`flex items-center justify-between p-4 border rounded-xl transition-all duration-200 ${
-              emailNotifications[item.key]
-                ? 'bg-orange-50 dark:bg-brand-orange/10 border-brand-orange shadow-sm'
-                : 'bg-white dark:bg-neutral-900 border-neutral-200 dark:border-neutral-800'
-            }`}
-          >
-            <div className="space-y-0.5">
-              <span className={`block text-sm font-medium transition-colors duration-200 ${
-                emailNotifications[item.key] ? 'text-brand-orange' : 'text-neutral-900 dark:text-white'
-              }`}>
-                {item.label}
-              </span>
-              <span className={`block text-xs transition-colors duration-200 ${
-                emailNotifications[item.key] ? 'text-brand-orange/80' : 'text-neutral-500 dark:text-neutral-400'
-              }`}>
-                {item.description}
-              </span>
-            </div>
-            <button
-              onClick={() => handleToggle(item.key)}
-              className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
-                emailNotifications[item.key] ? 'bg-brand-orange' : 'bg-neutral-200 dark:bg-neutral-700'
-              }`}
-            >
-              <span
-                className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
-                  emailNotifications[item.key] ? 'translate-x-5' : 'translate-x-0'
-                }`}
-              />
-            </button>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-function AccountManagementCard() {
-  const accountLinks = [
-    {
-      label: 'Profile & Personal Info',
-      description: 'Update your name, email, and avatar',
-      href: 'https://auth.ciphera.net/settings',
-      icon: UserIcon,
-    },
-    {
-      label: 'Security & 2FA',
-      description: 'Password, two-factor authentication, and passkeys',
-      href: 'https://auth.ciphera.net/settings?tab=security',
-      icon: LockIcon,
-    },
-    {
-      label: 'Active Sessions',
-      description: 'Manage devices logged into your account',
-      href: 'https://auth.ciphera.net/settings?tab=sessions',
-      icon: BoxIcon,
-    },
-  ]
-
-  return (
-    <div className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-6 shadow-sm">
-      <div className="flex items-center gap-3 mb-6">
-        <div className="p-2 rounded-lg bg-brand-orange/10">
-          <UserIcon className="w-5 h-5 text-brand-orange" />
-        </div>
-        <div>
-          <h2 className="text-lg font-semibold text-neutral-900 dark:text-white">Ciphera Account</h2>
-          <p className="text-sm text-neutral-500">Manage your account across all Ciphera products</p>
-        </div>
-      </div>
-
-      <div className="space-y-3">
-        {accountLinks.map((link) => (
-          <a
-            key={link.label}
-            href={link.href}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="flex items-start gap-3 p-3 rounded-xl border border-neutral-200 dark:border-neutral-800 hover:border-brand-orange/30 hover:bg-brand-orange/5 transition-all group"
-          >
-            <link.icon className="w-5 h-5 text-neutral-400 group-hover:text-brand-orange shrink-0 mt-0.5" />
-            <div className="flex-1 min-w-0">
-              <div className="flex items-center gap-2">
-                <span className="font-medium text-neutral-900 dark:text-white group-hover:text-brand-orange">
-                  {link.label}
-                </span>
-                <ExternalLinkIcon className="w-3.5 h-3.5 text-neutral-400" />
-              </div>
-              <p className="text-sm text-neutral-500 mt-0.5">{link.description}</p>
-            </div>
-            <ChevronRightIcon className="w-4 h-4 text-neutral-400 shrink-0 mt-1" />
-          </a>
-        ))}
-      </div>
-
-      <div className="mt-4 pt-4 border-t border-neutral-200 dark:border-neutral-800">
-        <p className="text-xs text-neutral-500">
-          These settings apply to your Ciphera Account and affect all products (Drop, Pulse, and Auth).
-        </p>
-      </div>
-    </div>
-  )
-}
-
-// --- Main Settings Section ---
-
-function AppSettingsSection() {
-  const [active, setActive] = useState<ActiveSelection>({ section: 'profile', subTab: 'profile' })
-  const [expanded, setExpanded] = useState<Set<ExpandableSection>>(new Set(['profile']))
-
-  const toggleSection = (section: ExpandableSection) => {
-    setExpanded(prev => {
-      const next = new Set(prev)
-      if (next.has(section)) {
-        next.delete(section)
-      } else {
-        next.add(section)
-      }
-      return next
-    })
-  }
-
-  const selectSubTab = (selection: ActiveSelection) => {
-    setActive(selection)
-    if ('subTab' in selection) {
-      setExpanded(prev => new Set(prev).add(selection.section as ExpandableSection))
-    }
-  }
-
-  const renderContent = () => {
-    switch (active.section) {
-      case 'profile':
-        return <ProfileSettings activeTab={active.subTab} />
-      case 'notifications':
-        if (active.subTab === 'security') return <SecurityAlertsCard />
-        if (active.subTab === 'center') return (
-          <div className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-8 shadow-sm">
-            <div className="text-center max-w-md mx-auto">
-              <BellIcon className="w-12 h-12 text-neutral-300 mx-auto mb-4" />
-              <h3 className="text-lg font-medium text-neutral-900 dark:text-white mb-2">Notification Center</h3>
-              <p className="text-sm text-neutral-500 mb-4">
-                View and manage all your notifications in one place.
-              </p>
-              <Link
-                href="/notifications"
-                className="inline-flex items-center gap-2 px-4 py-2 bg-brand-orange text-white rounded-lg hover:bg-brand-orange/90 transition-colors"
-              >
-                Open Notification Center
-                <ChevronRightIcon className="w-4 h-4" />
-              </Link>
-            </div>
-          </div>
-        )
-        return null
-      case 'account':
-        return <AccountManagementCard />
-      case 'devices':
-        return <TrustedDevicesCard />
-      case 'activity':
-        return <SecurityActivityCard />
-      default:
-        return null
-    }
-  }
-
-  return (
-    <div className="flex flex-col lg:flex-row gap-8">
-      {/* Sidebar Navigation */}
-      <nav className="w-full lg:w-72 flex-shrink-0 space-y-6">
-        {/* Pulse Settings Section */}
-        <div>
-          <h3 className="text-xs font-semibold text-neutral-400 uppercase tracking-wider mb-3 px-4">
-            Pulse Settings
-          </h3>
-          <div className="space-y-1">
-            <div>
-              <SectionHeader
-                expanded={expanded.has('profile')}
-                active={active.section === 'profile'}
-                onToggle={() => {
-                  toggleSection('profile')
-                  if (!expanded.has('profile')) {
-                    selectSubTab({ section: 'profile', subTab: 'profile' })
-                  }
-                }}
-                icon={UserIcon}
-                label="Profile & Preferences"
-                description="Your profile and sharing defaults"
-              />
-              <ExpandableSubItems expanded={expanded.has('profile')}>
-                <SubItem
-                  active={active.section === 'profile' && active.subTab === 'profile'}
-                  onClick={() => selectSubTab({ section: 'profile', subTab: 'profile' })}
-                  label="Profile"
-                />
-                <SubItem
-                  active={active.section === 'profile' && active.subTab === 'security'}
-                  onClick={() => selectSubTab({ section: 'profile', subTab: 'security' })}
-                  label="Security"
-                />
-                <SubItem
-                  active={active.section === 'profile' && active.subTab === 'preferences'}
-                  onClick={() => selectSubTab({ section: 'profile', subTab: 'preferences' })}
-                  label="Preferences"
-                />
-              </ExpandableSubItems>
-            </div>
-
-            {/* Notifications (expandable) */}
-            <div>
-              <SectionHeader
-                expanded={expanded.has('notifications')}
-                active={active.section === 'notifications'}
-                onToggle={() => {
-                  toggleSection('notifications')
-                  if (!expanded.has('notifications')) {
-                    selectSubTab({ section: 'notifications', subTab: 'security' })
-                  }
-                }}
-                icon={BellIcon}
-                label="Notifications"
-                description="Email and in-app notifications"
-              />
-              <ExpandableSubItems expanded={expanded.has('notifications')}>
-                <SubItem
-                  active={active.section === 'notifications' && active.subTab === 'security'}
-                  onClick={() => selectSubTab({ section: 'notifications', subTab: 'security' })}
-                  label="Security Alerts"
-                />
-                <SubItem
-                  active={active.section === 'notifications' && active.subTab === 'center'}
-                  onClick={() => selectSubTab({ section: 'notifications', subTab: 'center' })}
-                  label="Notification Center"
-                />
-              </ExpandableSubItems>
-            </div>
-          </div>
-        </div>
-
-        {/* Ciphera Account Section */}
-        <div className="pt-4 border-t border-neutral-200 dark:border-neutral-800">
-          <h3 className="text-xs font-semibold text-neutral-400 uppercase tracking-wider mb-3 px-4">
-            Ciphera Account
-          </h3>
-          <div>
-            <SectionHeader
-              expanded={expanded.has('account')}
-              active={active.section === 'account' || active.section === 'devices' || active.section === 'activity'}
-              onToggle={() => {
-                toggleSection('account')
-                if (!expanded.has('account')) {
-                  setActive({ section: 'account' })
-                }
-              }}
-              icon={LockIcon}
-              label="Manage Account"
-              description="Security, 2FA, and sessions"
-            />
-            <ExpandableSubItems expanded={expanded.has('account')}>
-              <SubItem
-                active={false}
-                onClick={() => window.open('https://auth.ciphera.net/settings', '_blank')}
-                label="Profile & Personal Info"
-                external
-              />
-              <SubItem
-                active={false}
-                onClick={() => window.open('https://auth.ciphera.net/settings?tab=security', '_blank')}
-                label="Security & 2FA"
-                external
-              />
-              <SubItem
-                active={false}
-                onClick={() => window.open('https://auth.ciphera.net/settings?tab=sessions', '_blank')}
-                label="Active Sessions"
-                external
-              />
-              <SubItem
-                active={active.section === 'devices'}
-                onClick={() => setActive({ section: 'devices' })}
-                label="Trusted Devices"
-              />
-              <SubItem
-                active={active.section === 'activity'}
-                onClick={() => setActive({ section: 'activity' })}
-                label="Security Activity"
-              />
-            </ExpandableSubItems>
-          </div>
-        </div>
-      </nav>
-
-      {/* Content Area */}
-      <div className="flex-1 min-w-0">
-        {renderContent()}
-      </div>
-    </div>
-  )
-}
-
-export default function SettingsPageClient() {
-  const { user } = useAuth()
-
-  return (
-    <div className="space-y-8">
-      {/* Page Header */}
-      <div>
-        <h1 className="text-3xl font-bold text-neutral-900 dark:text-white">Settings</h1>
-        <p className="mt-2 text-neutral-600 dark:text-neutral-400">
-          Manage your Pulse preferences and Ciphera account settings
-        </p>
-      </div>
-
-      {/* Breadcrumb / Context */}
-      <div className="flex items-center gap-2 text-sm text-neutral-500">
-        <span>You are signed in as</span>
-        <span className="font-medium text-neutral-900 dark:text-white">{user?.email}</span>
-        <span>&bull;</span>
-        <a
-          href="https://auth.ciphera.net/settings"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-brand-orange hover:underline inline-flex items-center gap-1"
-        >
-          Manage in Ciphera Account
-          <ExternalLinkIcon className="w-3 h-3" />
-        </a>
-      </div>
-
-      {/* Settings Content */}
-      <AppSettingsSection />
-    </div>
-  )
-}
diff --git a/app/settings/page.tsx b/app/settings/page.tsx
deleted file mode 100644
index 334828c..0000000
--- a/app/settings/page.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import SettingsPageClient from './SettingsPageClient'
-
-export const metadata = {
-  title: 'Settings - Pulse',
-  description: 'Manage your account settings',
-}
-
-export default function SettingsPage() {
-  return (
-    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
-      <SettingsPageClient />
-    </div>
-  )
-}
diff --git a/components/settings/SettingsModalWrapper.tsx b/components/settings/SettingsModalWrapper.tsx
new file mode 100644
index 0000000..5b37916
--- /dev/null
+++ b/components/settings/SettingsModalWrapper.tsx
@@ -0,0 +1,186 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import Link from 'next/link'
+import { SettingsModal, type SettingsSection } from '@ciphera-net/ui'
+import { UserIcon, LockIcon, ChevronRightIcon } from '@ciphera-net/ui'
+import ProfileSettings from '@/components/settings/ProfileSettings'
+import TrustedDevicesCard from '@/components/settings/TrustedDevicesCard'
+import SecurityActivityCard from '@/components/settings/SecurityActivityCard'
+import { useSettingsModal } from '@/lib/settings-modal-context'
+import { useAuth } from '@/lib/auth/context'
+import { updateUserPreferences } from '@/lib/api/user'
+
+// Inline SVG icons not available in ciphera-ui
+function BellIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
+      <path d="M13.73 21a2 2 0 0 1-3.46 0" />
+    </svg>
+  )
+}
+
+// --- Security Alerts ---
+
+const SECURITY_ALERT_OPTIONS = [
+  { key: 'login_alerts', label: 'Login Activity', description: 'New device sign-ins and suspicious login attempts.' },
+  { key: 'password_alerts', label: 'Password Changes', description: 'Password changes and session revocations.' },
+  { key: 'two_factor_alerts', label: 'Two-Factor Authentication', description: '2FA enabled/disabled and recovery code changes.' },
+]
+
+function SecurityAlertsCard() {
+  const { user } = useAuth()
+  const [emailNotifications, setEmailNotifications] = useState<Record<string, boolean>>({})
+
+  useEffect(() => {
+    if (user?.preferences?.email_notifications) {
+      setEmailNotifications(user.preferences.email_notifications)
+    } else {
+      const defaults = SECURITY_ALERT_OPTIONS.reduce((acc, option) => ({
+        ...acc,
+        [option.key]: true
+      }), {} as Record<string, boolean>)
+      setEmailNotifications(defaults)
+    }
+  }, [user])
+
+  const handleToggle = async (key: string) => {
+    const newState = {
+      ...emailNotifications,
+      [key]: !emailNotifications[key]
+    }
+    setEmailNotifications(newState)
+    try {
+      await updateUserPreferences({
+        email_notifications: newState as { new_file_received: boolean; file_downloaded: boolean; login_alerts: boolean; password_alerts: boolean; two_factor_alerts: boolean }
+      })
+    } catch {
+      setEmailNotifications(prev => ({
+        ...prev,
+        [key]: !prev[key]
+      }))
+    }
+  }
+
+  return (
+    <div className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-6 shadow-sm">
+      <div className="flex items-center gap-3 mb-6">
+        <div className="p-2 rounded-lg bg-brand-orange/10">
+          <BellIcon className="w-5 h-5 text-brand-orange" />
+        </div>
+        <div>
+          <h2 className="text-lg font-semibold text-neutral-900 dark:text-white">Security Alerts</h2>
+          <p className="text-sm text-neutral-500">Choose which security events trigger email alerts</p>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        {SECURITY_ALERT_OPTIONS.map((item) => (
+          <div
+            key={item.key}
+            className={`flex items-center justify-between p-4 border rounded-xl transition-all duration-200 ${
+              emailNotifications[item.key]
+                ? 'bg-orange-50 dark:bg-brand-orange/10 border-brand-orange shadow-sm'
+                : 'bg-white dark:bg-neutral-900 border-neutral-200 dark:border-neutral-800'
+            }`}
+          >
+            <div className="space-y-0.5">
+              <span className={`block text-sm font-medium transition-colors duration-200 ${
+                emailNotifications[item.key] ? 'text-brand-orange' : 'text-neutral-900 dark:text-white'
+              }`}>
+                {item.label}
+              </span>
+              <span className={`block text-xs transition-colors duration-200 ${
+                emailNotifications[item.key] ? 'text-brand-orange/80' : 'text-neutral-500 dark:text-neutral-400'
+              }`}>
+                {item.description}
+              </span>
+            </div>
+            <button
+              onClick={() => handleToggle(item.key)}
+              className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
+                emailNotifications[item.key] ? 'bg-brand-orange' : 'bg-neutral-200 dark:bg-neutral-700'
+              }`}
+            >
+              <span
+                className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+                  emailNotifications[item.key] ? 'translate-x-5' : 'translate-x-0'
+                }`}
+              />
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// --- Notification Center Placeholder ---
+
+function NotificationCenterPlaceholder() {
+  return (
+    <div className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-8 shadow-sm">
+      <div className="text-center max-w-md mx-auto">
+        <BellIcon className="w-12 h-12 text-neutral-300 mx-auto mb-4" />
+        <h3 className="text-lg font-medium text-neutral-900 dark:text-white mb-2">Notification Center</h3>
+        <p className="text-sm text-neutral-500 mb-4">
+          View and manage all your notifications in one place.
+        </p>
+        <Link
+          href="/notifications"
+          className="inline-flex items-center gap-2 px-4 py-2 bg-brand-orange text-white rounded-lg hover:bg-brand-orange/90 transition-colors"
+        >
+          Open Notification Center
+          <ChevronRightIcon className="w-4 h-4" />
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+// --- Main Wrapper ---
+
+export default function SettingsModalWrapper() {
+  const { isOpen, closeSettings } = useSettingsModal()
+
+  const sections: SettingsSection[] = [
+    {
+      id: 'pulse',
+      label: 'Pulse Settings',
+      description: 'Profile and preferences',
+      icon: UserIcon,
+      defaultExpanded: true,
+      items: [
+        { id: 'profile', label: 'Profile', content: <ProfileSettings activeTab="profile" /> },
+        { id: 'security', label: 'Security', content: <ProfileSettings activeTab="security" /> },
+        { id: 'preferences', label: 'Preferences', content: <ProfileSettings activeTab="preferences" /> },
+      ],
+    },
+    {
+      id: 'notifications',
+      label: 'Notifications',
+      description: 'Email and in-app notifications',
+      icon: BellIcon,
+      items: [
+        { id: 'security-alerts', label: 'Security Alerts', content: <SecurityAlertsCard /> },
+        { id: 'center', label: 'Notification Center', content: <NotificationCenterPlaceholder /> },
+      ],
+    },
+    {
+      id: 'account',
+      label: 'Ciphera Account',
+      description: 'Security, 2FA, and sessions',
+      icon: LockIcon,
+      items: [
+        { id: 'auth-profile', label: 'Profile & Personal Info', href: 'https://auth.ciphera.net/settings', external: true },
+        { id: 'auth-security', label: 'Security & 2FA', href: 'https://auth.ciphera.net/settings?tab=security', external: true },
+        { id: 'auth-sessions', label: 'Active Sessions', href: 'https://auth.ciphera.net/settings?tab=sessions', external: true },
+        { id: 'devices', label: 'Trusted Devices', content: <TrustedDevicesCard /> },
+        { id: 'activity', label: 'Security Activity', content: <SecurityActivityCard /> },
+      ],
+    },
+  ]
+
+  return <SettingsModal open={isOpen} onClose={closeSettings} sections={sections} />
+}
diff --git a/lib/settings-modal-context.tsx b/lib/settings-modal-context.tsx
new file mode 100644
index 0000000..f4de243
--- /dev/null
+++ b/lib/settings-modal-context.tsx
@@ -0,0 +1,31 @@
+'use client'
+
+import { createContext, useContext, useState, useCallback } from 'react'
+
+interface SettingsModalContextType {
+  isOpen: boolean
+  openSettings: () => void
+  closeSettings: () => void
+}
+
+const SettingsModalContext = createContext<SettingsModalContextType>({
+  isOpen: false,
+  openSettings: () => {},
+  closeSettings: () => {},
+})
+
+export function SettingsModalProvider({ children }: { children: React.ReactNode }) {
+  const [isOpen, setIsOpen] = useState(false)
+  const openSettings = useCallback(() => setIsOpen(true), [])
+  const closeSettings = useCallback(() => setIsOpen(false), [])
+
+  return (
+    <SettingsModalContext.Provider value={{ isOpen, openSettings, closeSettings }}>
+      {children}
+    </SettingsModalContext.Provider>
+  )
+}
+
+export function useSettingsModal() {
+  return useContext(SettingsModalContext)
+}
diff --git a/package-lock.json b/package-lock.json
index 67de8f1..346f3fd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "pulse-frontend",
       "version": "0.13.0-alpha",
       "dependencies": {
-        "@ciphera-net/ui": "^0.0.80",
+        "@ciphera-net/ui": "^0.0.88",
         "@ducanh2912/next-pwa": "^10.2.9",
         "@radix-ui/react-icons": "^1.3.0",
         "@simplewebauthn/browser": "^13.2.2",
@@ -1665,9 +1665,9 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.0.80",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.80/0fc38c4004f3d899afffa8c15addc490b72efe15",
-      "integrity": "sha512-/Jc0aTEE94YA+V/FbpCK133IYbwp/rPpr1a/pdhIG54OzMzVnaRndaVpNLpmLB2Y7POmRTecJr831L1DUrI4WQ==",
+      "version": "0.0.88",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.88/70285ac19f9349fd13b4cbedf59612bc9c6ecc7e",
+      "integrity": "sha512-YMfrK8NVfFyS/KqvlnFSm3EmeCnIc5Wb4gO//qqyIt7d1lFGgsQJfQ0xOHoo0oQq0STywdnXPOwaTUWJeUIdMA==",
       "dependencies": {
         "@radix-ui/react-icons": "^1.3.0",
         "clsx": "^2.1.0",
diff --git a/package.json b/package.json
index 0c03c2d..a2ecb1d 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.0.80",
+    "@ciphera-net/ui": "^0.0.88",
     "@ducanh2912/next-pwa": "^10.2.9",
     "@radix-ui/react-icons": "^1.3.0",
     "@simplewebauthn/browser": "^13.2.2",

From 7865b417222e9c73a1d08744515227cbc6adde2d Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 6 Mar 2026 00:20:08 +0100
Subject: [PATCH 03/28] refactor: use shared settings components, fix sections

- Use NotificationToggleList and BellIcon from @ciphera-net/ui
- Remove duplicated inline SVG icons and toggle code
- Remove double card borders from content areas
- Remove broken Ciphera Account external links
- Add dedicated Security section (Trusted Devices, Security Activity)
- Bump @ciphera-net/ui to ^0.0.89
---
 components/settings/SettingsModalWrapper.tsx | 118 +++++--------------
 package-lock.json                            |   8 +-
 package.json                                 |   2 +-
 3 files changed, 34 insertions(+), 94 deletions(-)

diff --git a/components/settings/SettingsModalWrapper.tsx b/components/settings/SettingsModalWrapper.tsx
index 5b37916..dfa8323 100644
--- a/components/settings/SettingsModalWrapper.tsx
+++ b/components/settings/SettingsModalWrapper.tsx
@@ -3,7 +3,8 @@
 import { useState, useEffect } from 'react'
 import Link from 'next/link'
 import { SettingsModal, type SettingsSection } from '@ciphera-net/ui'
-import { UserIcon, LockIcon, ChevronRightIcon } from '@ciphera-net/ui'
+import { UserIcon, LockIcon, BellIcon, ChevronRightIcon } from '@ciphera-net/ui'
+import { NotificationToggleList, type NotificationOption } from '@ciphera-net/ui'
 import ProfileSettings from '@/components/settings/ProfileSettings'
 import TrustedDevicesCard from '@/components/settings/TrustedDevicesCard'
 import SecurityActivityCard from '@/components/settings/SecurityActivityCard'
@@ -11,19 +12,9 @@ import { useSettingsModal } from '@/lib/settings-modal-context'
 import { useAuth } from '@/lib/auth/context'
 import { updateUserPreferences } from '@/lib/api/user'
 
-// Inline SVG icons not available in ciphera-ui
-function BellIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
-      <path d="M13.73 21a2 2 0 0 1-3.46 0" />
-    </svg>
-  )
-}
-
 // --- Security Alerts ---
 
-const SECURITY_ALERT_OPTIONS = [
+const SECURITY_ALERT_OPTIONS: NotificationOption[] = [
   { key: 'login_alerts', label: 'Login Activity', description: 'New device sign-ins and suspicious login attempts.' },
   { key: 'password_alerts', label: 'Password Changes', description: 'Password changes and session revocations.' },
   { key: 'two_factor_alerts', label: 'Two-Factor Authentication', description: '2FA enabled/disabled and recovery code changes.' },
@@ -64,55 +55,14 @@ function SecurityAlertsCard() {
   }
 
   return (
-    <div className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-6 shadow-sm">
-      <div className="flex items-center gap-3 mb-6">
-        <div className="p-2 rounded-lg bg-brand-orange/10">
-          <BellIcon className="w-5 h-5 text-brand-orange" />
-        </div>
-        <div>
-          <h2 className="text-lg font-semibold text-neutral-900 dark:text-white">Security Alerts</h2>
-          <p className="text-sm text-neutral-500">Choose which security events trigger email alerts</p>
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        {SECURITY_ALERT_OPTIONS.map((item) => (
-          <div
-            key={item.key}
-            className={`flex items-center justify-between p-4 border rounded-xl transition-all duration-200 ${
-              emailNotifications[item.key]
-                ? 'bg-orange-50 dark:bg-brand-orange/10 border-brand-orange shadow-sm'
-                : 'bg-white dark:bg-neutral-900 border-neutral-200 dark:border-neutral-800'
-            }`}
-          >
-            <div className="space-y-0.5">
-              <span className={`block text-sm font-medium transition-colors duration-200 ${
-                emailNotifications[item.key] ? 'text-brand-orange' : 'text-neutral-900 dark:text-white'
-              }`}>
-                {item.label}
-              </span>
-              <span className={`block text-xs transition-colors duration-200 ${
-                emailNotifications[item.key] ? 'text-brand-orange/80' : 'text-neutral-500 dark:text-neutral-400'
-              }`}>
-                {item.description}
-              </span>
-            </div>
-            <button
-              onClick={() => handleToggle(item.key)}
-              className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
-                emailNotifications[item.key] ? 'bg-brand-orange' : 'bg-neutral-200 dark:bg-neutral-700'
-              }`}
-            >
-              <span
-                className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
-                  emailNotifications[item.key] ? 'translate-x-5' : 'translate-x-0'
-                }`}
-              />
-            </button>
-          </div>
-        ))}
-      </div>
-    </div>
+    <NotificationToggleList
+      title="Security Alerts"
+      description="Choose which security events trigger email alerts"
+      icon={<BellIcon className="w-5 h-5 text-brand-orange" />}
+      options={SECURITY_ALERT_OPTIONS}
+      values={emailNotifications}
+      onToggle={handleToggle}
+    />
   )
 }
 
@@ -120,21 +70,14 @@ function SecurityAlertsCard() {
 
 function NotificationCenterPlaceholder() {
   return (
-    <div className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-8 shadow-sm">
-      <div className="text-center max-w-md mx-auto">
-        <BellIcon className="w-12 h-12 text-neutral-300 mx-auto mb-4" />
-        <h3 className="text-lg font-medium text-neutral-900 dark:text-white mb-2">Notification Center</h3>
-        <p className="text-sm text-neutral-500 mb-4">
-          View and manage all your notifications in one place.
-        </p>
-        <Link
-          href="/notifications"
-          className="inline-flex items-center gap-2 px-4 py-2 bg-brand-orange text-white rounded-lg hover:bg-brand-orange/90 transition-colors"
-        >
-          Open Notification Center
-          <ChevronRightIcon className="w-4 h-4" />
-        </Link>
-      </div>
+    <div className="text-center max-w-md mx-auto py-8">
+      <BellIcon className="w-12 h-12 text-neutral-300 mx-auto mb-4" />
+      <h3 className="text-lg font-medium text-neutral-900 dark:text-white mb-2">Notification Center</h3>
+      <p className="text-sm text-neutral-500 mb-4">View and manage all your notifications in one place.</p>
+      <Link href="/notifications" className="inline-flex items-center gap-2 px-4 py-2 bg-brand-orange text-white rounded-lg hover:bg-brand-orange/90 transition-colors">
+        Open Notification Center
+        <ChevronRightIcon className="w-4 h-4" />
+      </Link>
     </div>
   )
 }
@@ -157,6 +100,16 @@ export default function SettingsModalWrapper() {
         { id: 'preferences', label: 'Preferences', content: <ProfileSettings activeTab="preferences" /> },
       ],
     },
+    {
+      id: 'security-section',
+      label: 'Security',
+      description: 'Devices and activity',
+      icon: LockIcon,
+      items: [
+        { id: 'devices', label: 'Trusted Devices', content: <TrustedDevicesCard /> },
+        { id: 'activity', label: 'Security Activity', content: <SecurityActivityCard /> },
+      ],
+    },
     {
       id: 'notifications',
       label: 'Notifications',
@@ -167,19 +120,6 @@ export default function SettingsModalWrapper() {
         { id: 'center', label: 'Notification Center', content: <NotificationCenterPlaceholder /> },
       ],
     },
-    {
-      id: 'account',
-      label: 'Ciphera Account',
-      description: 'Security, 2FA, and sessions',
-      icon: LockIcon,
-      items: [
-        { id: 'auth-profile', label: 'Profile & Personal Info', href: 'https://auth.ciphera.net/settings', external: true },
-        { id: 'auth-security', label: 'Security & 2FA', href: 'https://auth.ciphera.net/settings?tab=security', external: true },
-        { id: 'auth-sessions', label: 'Active Sessions', href: 'https://auth.ciphera.net/settings?tab=sessions', external: true },
-        { id: 'devices', label: 'Trusted Devices', content: <TrustedDevicesCard /> },
-        { id: 'activity', label: 'Security Activity', content: <SecurityActivityCard /> },
-      ],
-    },
   ]
 
   return <SettingsModal open={isOpen} onClose={closeSettings} sections={sections} />
diff --git a/package-lock.json b/package-lock.json
index 346f3fd..28f0f2c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "pulse-frontend",
       "version": "0.13.0-alpha",
       "dependencies": {
-        "@ciphera-net/ui": "^0.0.88",
+        "@ciphera-net/ui": "^0.0.89",
         "@ducanh2912/next-pwa": "^10.2.9",
         "@radix-ui/react-icons": "^1.3.0",
         "@simplewebauthn/browser": "^13.2.2",
@@ -1665,9 +1665,9 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.0.88",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.88/70285ac19f9349fd13b4cbedf59612bc9c6ecc7e",
-      "integrity": "sha512-YMfrK8NVfFyS/KqvlnFSm3EmeCnIc5Wb4gO//qqyIt7d1lFGgsQJfQ0xOHoo0oQq0STywdnXPOwaTUWJeUIdMA==",
+      "version": "0.0.89",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.89/2c528b440d3984e20a524be8a1d458df0aa8597e",
+      "integrity": "sha512-Ax4EMJCbWeEaCkoQqFCbl28QE5TnS0OY2nPNQiLVdLcG3xyiAgGL7MPpewo1RAUOrYm1/cr3F4Z3iiX7VAeSMA==",
       "dependencies": {
         "@radix-ui/react-icons": "^1.3.0",
         "clsx": "^2.1.0",
diff --git a/package.json b/package.json
index a2ecb1d..07c507b 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.0.88",
+    "@ciphera-net/ui": "^0.0.89",
     "@ducanh2912/next-pwa": "^10.2.9",
     "@radix-ui/react-icons": "^1.3.0",
     "@simplewebauthn/browser": "^13.2.2",

From 6d360cf1acd76a53252118320ea57f766b55aa89 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 6 Mar 2026 11:44:30 +0100
Subject: [PATCH 04/28] =?UTF-8?q?feat:=20settings=20modal=20improvements?=
 =?UTF-8?q?=20=E2=80=94=20borderless=20profile,=20remove=20descriptions,?=
 =?UTF-8?q?=20bump=20ui=20to=200.0.91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add borderless prop passthrough to ProfileSettings
- Remove section descriptions from SettingsModalWrapper sidebar
- Bump @ciphera-net/ui to ^0.0.91
---
 components/settings/ProfileSettings.tsx      | 4 +++-
 components/settings/SettingsModalWrapper.tsx | 9 +++------
 package-lock.json                            | 8 ++++----
 package.json                                 | 2 +-
 4 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/components/settings/ProfileSettings.tsx b/components/settings/ProfileSettings.tsx
index e1d4e5d..f8dd99c 100644
--- a/components/settings/ProfileSettings.tsx
+++ b/components/settings/ProfileSettings.tsx
@@ -10,9 +10,10 @@ import { registerPasskey, listPasskeys, deletePasskey } from '@/lib/api/webauthn
 
 interface Props {
   activeTab?: 'profile' | 'security' | 'preferences'
+  borderless?: boolean
 }
 
-export default function ProfileSettings({ activeTab }: Props = {}) {
+export default function ProfileSettings({ activeTab, borderless }: Props = {}) {
   const { user, refresh, logout } = useAuth()
 
   if (!user) return null
@@ -61,6 +62,7 @@ export default function ProfileSettings({ activeTab }: Props = {}) {
       activeTab={activeTab}
       hideNav={activeTab !== undefined}
       hideNotifications
+      borderless={borderless}
     />
   )
 }
diff --git a/components/settings/SettingsModalWrapper.tsx b/components/settings/SettingsModalWrapper.tsx
index dfa8323..f50e844 100644
--- a/components/settings/SettingsModalWrapper.tsx
+++ b/components/settings/SettingsModalWrapper.tsx
@@ -91,19 +91,17 @@ export default function SettingsModalWrapper() {
     {
       id: 'pulse',
       label: 'Pulse Settings',
-      description: 'Profile and preferences',
       icon: UserIcon,
       defaultExpanded: true,
       items: [
-        { id: 'profile', label: 'Profile', content: <ProfileSettings activeTab="profile" /> },
-        { id: 'security', label: 'Security', content: <ProfileSettings activeTab="security" /> },
-        { id: 'preferences', label: 'Preferences', content: <ProfileSettings activeTab="preferences" /> },
+        { id: 'profile', label: 'Profile', content: <ProfileSettings activeTab="profile" borderless /> },
+        { id: 'security', label: 'Security', content: <ProfileSettings activeTab="security" borderless /> },
+        { id: 'preferences', label: 'Preferences', content: <ProfileSettings activeTab="preferences" borderless /> },
       ],
     },
     {
       id: 'security-section',
       label: 'Security',
-      description: 'Devices and activity',
       icon: LockIcon,
       items: [
         { id: 'devices', label: 'Trusted Devices', content: <TrustedDevicesCard /> },
@@ -113,7 +111,6 @@ export default function SettingsModalWrapper() {
     {
       id: 'notifications',
       label: 'Notifications',
-      description: 'Email and in-app notifications',
       icon: BellIcon,
       items: [
         { id: 'security-alerts', label: 'Security Alerts', content: <SecurityAlertsCard /> },
diff --git a/package-lock.json b/package-lock.json
index 28f0f2c..ea4f0f6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "pulse-frontend",
       "version": "0.13.0-alpha",
       "dependencies": {
-        "@ciphera-net/ui": "^0.0.89",
+        "@ciphera-net/ui": "^0.0.91",
         "@ducanh2912/next-pwa": "^10.2.9",
         "@radix-ui/react-icons": "^1.3.0",
         "@simplewebauthn/browser": "^13.2.2",
@@ -1665,9 +1665,9 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.0.89",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.89/2c528b440d3984e20a524be8a1d458df0aa8597e",
-      "integrity": "sha512-Ax4EMJCbWeEaCkoQqFCbl28QE5TnS0OY2nPNQiLVdLcG3xyiAgGL7MPpewo1RAUOrYm1/cr3F4Z3iiX7VAeSMA==",
+      "version": "0.0.91",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.91/7576638f924b0fe731de561d668315f61b5b5590",
+      "integrity": "sha512-PIG+zxGW8LCXbC3tFkvN0d7B+axcyXsZm3/GI96gC9px8YPDNYDiFSJXM2VH4ls+DeNBpCiykfKdgujD9IcxNw==",
       "dependencies": {
         "@radix-ui/react-icons": "^1.3.0",
         "clsx": "^2.1.0",
diff --git a/package.json b/package.json
index 07c507b..a10b935 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.0.89",
+    "@ciphera-net/ui": "^0.0.91",
     "@ducanh2912/next-pwa": "^10.2.9",
     "@radix-ui/react-icons": "^1.3.0",
     "@simplewebauthn/browser": "^13.2.2",

From acede8ca54b1268059deefdc8334f3afdb255078 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 6 Mar 2026 12:23:00 +0100
Subject: [PATCH 05/28] feat: rename section to Account, move Danger Zone to
 own sidebar item

- Rename "Pulse Settings" to "Account"
- Add hideDangerZone prop to hide it from Profile tab
- Add standalone "Danger Zone" item under Account section
- Bump @ciphera-net/ui to ^0.0.92
---
 components/settings/ProfileSettings.tsx      | 6 ++++--
 components/settings/SettingsModalWrapper.tsx | 5 +++--
 package-lock.json                            | 8 ++++----
 package.json                                 | 2 +-
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/components/settings/ProfileSettings.tsx b/components/settings/ProfileSettings.tsx
index f8dd99c..ebaec0b 100644
--- a/components/settings/ProfileSettings.tsx
+++ b/components/settings/ProfileSettings.tsx
@@ -9,11 +9,12 @@ import { setup2FA, verify2FA, disable2FA, regenerateRecoveryCodes } from '@/lib/
 import { registerPasskey, listPasskeys, deletePasskey } from '@/lib/api/webauthn'
 
 interface Props {
-  activeTab?: 'profile' | 'security' | 'preferences'
+  activeTab?: 'profile' | 'security' | 'preferences' | 'danger-zone'
   borderless?: boolean
+  hideDangerZone?: boolean
 }
 
-export default function ProfileSettings({ activeTab, borderless }: Props = {}) {
+export default function ProfileSettings({ activeTab, borderless, hideDangerZone }: Props = {}) {
   const { user, refresh, logout } = useAuth()
 
   if (!user) return null
@@ -63,6 +64,7 @@ export default function ProfileSettings({ activeTab, borderless }: Props = {}) {
       hideNav={activeTab !== undefined}
       hideNotifications
       borderless={borderless}
+      hideDangerZone={hideDangerZone}
     />
   )
 }
diff --git a/components/settings/SettingsModalWrapper.tsx b/components/settings/SettingsModalWrapper.tsx
index f50e844..2d21394 100644
--- a/components/settings/SettingsModalWrapper.tsx
+++ b/components/settings/SettingsModalWrapper.tsx
@@ -90,13 +90,14 @@ export default function SettingsModalWrapper() {
   const sections: SettingsSection[] = [
     {
       id: 'pulse',
-      label: 'Pulse Settings',
+      label: 'Account',
       icon: UserIcon,
       defaultExpanded: true,
       items: [
-        { id: 'profile', label: 'Profile', content: <ProfileSettings activeTab="profile" borderless /> },
+        { id: 'profile', label: 'Profile', content: <ProfileSettings activeTab="profile" borderless hideDangerZone /> },
         { id: 'security', label: 'Security', content: <ProfileSettings activeTab="security" borderless /> },
         { id: 'preferences', label: 'Preferences', content: <ProfileSettings activeTab="preferences" borderless /> },
+        { id: 'danger-zone', label: 'Danger Zone', content: <ProfileSettings activeTab="danger-zone" borderless /> },
       ],
     },
     {
diff --git a/package-lock.json b/package-lock.json
index ea4f0f6..0ebe5d2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "pulse-frontend",
       "version": "0.13.0-alpha",
       "dependencies": {
-        "@ciphera-net/ui": "^0.0.91",
+        "@ciphera-net/ui": "^0.0.92",
         "@ducanh2912/next-pwa": "^10.2.9",
         "@radix-ui/react-icons": "^1.3.0",
         "@simplewebauthn/browser": "^13.2.2",
@@ -1665,9 +1665,9 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.0.91",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.91/7576638f924b0fe731de561d668315f61b5b5590",
-      "integrity": "sha512-PIG+zxGW8LCXbC3tFkvN0d7B+axcyXsZm3/GI96gC9px8YPDNYDiFSJXM2VH4ls+DeNBpCiykfKdgujD9IcxNw==",
+      "version": "0.0.92",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.92/68088da543459b34ab9fe780713537713b5e0673",
+      "integrity": "sha512-R+8fyvz7DhqHyJ2gai6ssRY3rE2OQlNt3ZepcpMeZouhujSNLO7KtApS4AP2qvJhKuWTnPNLj/B+kOWC3L4LMA==",
       "dependencies": {
         "@radix-ui/react-icons": "^1.3.0",
         "clsx": "^2.1.0",
diff --git a/package.json b/package.json
index a10b935..10e1953 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.0.91",
+    "@ciphera-net/ui": "^0.0.92",
     "@ducanh2912/next-pwa": "^10.2.9",
     "@radix-ui/react-icons": "^1.3.0",
     "@simplewebauthn/browser": "^13.2.2",

From e72e6f2ec5a8dad34acb3a827ce8422859914a89 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 6 Mar 2026 19:25:05 +0100
Subject: [PATCH 06/28] feat: add AI traffic source identification

Display proper brand icons and names for AI referrers (ChatGPT,
Perplexity, Claude, Gemini, Copilot, DeepSeek, Grok, Meta AI,
You.com, Phind) in Top Referrers panel.
---
 CHANGELOG.md        |  4 ++++
 lib/utils/icons.tsx | 26 ++++++++++++++++++++++++--
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5f51b4d..6edade6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [0.13.0-alpha] - 2026-03-02
 
+### Added
+
+- **AI traffic source identification.** Pulse now automatically recognizes visitors coming from AI tools — ChatGPT, Perplexity, Claude, Gemini, Copilot, DeepSeek, Grok, Meta AI, You.com, and Phind. These sources appear in your Top Referrers with proper brand icons and display names instead of raw domain URLs. If someone clicks a link in an AI chat to visit your site, you'll see exactly which AI tool sent them.
+
 ### Improved
 
 - **Cleaner internal API code.** The analytics data-fetching layer has been streamlined — 13 near-identical endpoint functions were consolidated using a shared pattern, cutting roughly half the code while keeping every feature working exactly as before. This makes it easier to add new analytics endpoints in the future and reduces the chance of inconsistencies between them.
diff --git a/lib/utils/icons.tsx b/lib/utils/icons.tsx
index da7f3cd..f3cca87 100644
--- a/lib/utils/icons.tsx
+++ b/lib/utils/icons.tsx
@@ -30,7 +30,8 @@ import {
   FaGlobe
 } from 'react-icons/fa'
 import { FaXTwitter } from 'react-icons/fa6'
-import { SiBrave } from 'react-icons/si'
+import { SiBrave, SiOpenai, SiPerplexity, SiAnthropic, SiGooglegemini } from 'react-icons/si'
+import { RiRobot2Fill } from 'react-icons/ri'
 import { MdDeviceUnknown, MdSmartphone, MdTabletMac, MdDesktopWindows } from 'react-icons/md'
 
 export function getBrowserIcon(browserName: string) {
@@ -79,7 +80,17 @@ export function getReferrerIcon(referrerName: string) {
   if (lower.includes('github')) return <FaGithub className="text-neutral-800 dark:text-neutral-200" />
   if (lower.includes('youtube')) return <FaYoutube className="text-red-600" />
   if (lower.includes('reddit')) return <FaReddit className="text-orange-600" />
-  
+  // AI assistants and search tools
+  if (lower.includes('chatgpt') || lower.includes('openai')) return <SiOpenai className="text-neutral-800 dark:text-neutral-200" />
+  if (lower.includes('perplexity')) return <SiPerplexity className="text-teal-600" />
+  if (lower.includes('claude') || lower.includes('anthropic')) return <SiAnthropic className="text-orange-500" />
+  if (lower.includes('gemini')) return <SiGooglegemini className="text-blue-500" />
+  if (lower.includes('copilot')) return <FaGlobe className="text-blue-500" />
+  if (lower.includes('deepseek')) return <RiRobot2Fill className="text-blue-600" />
+  if (lower.includes('grok') || lower.includes('x.ai')) return <FaXTwitter className="text-neutral-800 dark:text-neutral-200" />
+  if (lower.includes('phind')) return <RiRobot2Fill className="text-purple-600" />
+  if (lower.includes('you.com')) return <RiRobot2Fill className="text-indigo-600" />
+
   // Try to use a generic globe or maybe check if it is a URL
   return <FaGlobe className="text-neutral-400" />
 }
@@ -111,6 +122,17 @@ const REFERRER_DISPLAY_OVERRIDES: Record<string, string> = {
   quora: 'Quora',
   't.co': 'X',
   'x.com': 'X',
+  // AI assistants and search tools
+  openai: 'ChatGPT',
+  perplexity: 'Perplexity',
+  claude: 'Claude',
+  anthropic: 'Claude',
+  gemini: 'Gemini',
+  copilot: 'Copilot',
+  deepseek: 'DeepSeek',
+  grok: 'Grok',
+  'you': 'You.com',
+  phind: 'Phind',
 }
 
 /**

From 53a0341925c36f119568c0b9544c263a47ceefbc Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 6 Mar 2026 19:41:11 +0100
Subject: [PATCH 07/28] feat: automatic outbound link and file download
 tracking

Adds a single click listener in the tracking script that detects
external link clicks and file download clicks, firing outbound_link
and file_download custom events. On by default, opt-out via
data-no-outbound / data-no-downloads attributes.
---
 CHANGELOG.md     |  2 ++
 public/script.js | 35 +++++++++++++++++++++++++++++++++++
 2 files changed, 37 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6edade6..36f9ab0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 ### Added
 
 - **AI traffic source identification.** Pulse now automatically recognizes visitors coming from AI tools — ChatGPT, Perplexity, Claude, Gemini, Copilot, DeepSeek, Grok, Meta AI, You.com, and Phind. These sources appear in your Top Referrers with proper brand icons and display names instead of raw domain URLs. If someone clicks a link in an AI chat to visit your site, you'll see exactly which AI tool sent them.
+- **Automatic outbound link tracking.** Pulse now tracks when visitors click links that take them to other websites. These show up as "outbound link" events in your Goals & Events panel — no setup needed. You can turn this off in your tracking snippet settings if you prefer.
+- **Automatic file download tracking.** When a visitor clicks a link to a downloadable file — PDF, ZIP, Excel, Word, MP3, and 20+ other formats — Pulse records it as a "file download" event. Like outbound links, this works automatically with no setup required.
 
 ### Improved
 
diff --git a/public/script.js b/public/script.js
index d360ce7..990e0db 100644
--- a/public/script.js
+++ b/public/script.js
@@ -346,4 +346,39 @@
   window.pulse = window.pulse || {};
   window.pulse.track = trackCustomEvent;
 
+  // * Auto-track outbound link clicks and file downloads (on by default)
+  // * Opt-out: add data-no-outbound or data-no-downloads to the script tag
+  var trackOutbound = !script.hasAttribute('data-no-outbound');
+  var trackDownloads = !script.hasAttribute('data-no-downloads');
+
+  if (trackOutbound || trackDownloads) {
+    var FILE_EXT_REGEX = /\.(pdf|zip|gz|tar|xlsx|xls|csv|docx|doc|pptx|ppt|mp4|mp3|wav|avi|mov|exe|dmg|pkg|deb|rpm|iso|7z|rar)($|\?|#)/i;
+
+    document.addEventListener('click', function(e) {
+      var el = e.target;
+      // * Walk up from clicked element to find nearest <a> tag
+      while (el && el.tagName !== 'A') el = el.parentElement;
+      if (!el || !el.href) return;
+
+      try {
+        var url = new URL(el.href, location.href);
+        // * Skip non-http links (mailto:, tel:, javascript:, etc.)
+        if (url.protocol !== 'http:' && url.protocol !== 'https:') return;
+
+        // * Check file download first (download attribute or known file extension)
+        if (trackDownloads && (el.hasAttribute('download') || FILE_EXT_REGEX.test(url.pathname))) {
+          trackCustomEvent('file_download');
+          return;
+        }
+
+        // * Check outbound link (different hostname)
+        if (trackOutbound && url.hostname && url.hostname !== location.hostname) {
+          trackCustomEvent('outbound_link');
+        }
+      } catch (err) {
+        // * Invalid URL - skip silently
+      }
+    }, true); // * Capture phase: fires before default navigation
+  }
+
 })();

From 8b1d196812dddd342d89bc4ad378fd59f5373b71 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 6 Mar 2026 20:00:22 +0100
Subject: [PATCH 08/28] feat: add automatic 404 detection, scroll depth
 tracking, and scroll depth dashboard card

- 404 detection: checks document.title for "404" or "not found", fires custom event, SPA-aware
- Scroll depth: passive scroll listener fires events at 25/50/75/100% thresholds
- ScrollDepth dashboard card: progress bar visualization showing % of visitors reaching each threshold
- Scroll events filtered out of GoalStats to avoid duplication
- Both features on by default, opt-out via data-no-404 / data-no-scroll
---
 CHANGELOG.md                         |  2 +
 app/sites/[id]/page.tsx              |  6 ++-
 components/dashboard/ScrollDepth.tsx | 80 ++++++++++++++++++++++++++++
 public/script.js                     | 66 ++++++++++++++++++++++-
 4 files changed, 151 insertions(+), 3 deletions(-)
 create mode 100644 components/dashboard/ScrollDepth.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 36f9ab0..a8d4725 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 - **AI traffic source identification.** Pulse now automatically recognizes visitors coming from AI tools — ChatGPT, Perplexity, Claude, Gemini, Copilot, DeepSeek, Grok, Meta AI, You.com, and Phind. These sources appear in your Top Referrers with proper brand icons and display names instead of raw domain URLs. If someone clicks a link in an AI chat to visit your site, you'll see exactly which AI tool sent them.
 - **Automatic outbound link tracking.** Pulse now tracks when visitors click links that take them to other websites. These show up as "outbound link" events in your Goals & Events panel — no setup needed. You can turn this off in your tracking snippet settings if you prefer.
 - **Automatic file download tracking.** When a visitor clicks a link to a downloadable file — PDF, ZIP, Excel, Word, MP3, and 20+ other formats — Pulse records it as a "file download" event. Like outbound links, this works automatically with no setup required.
+- **Automatic 404 error page detection.** Pulse now detects when a visitor lands on a page that doesn't exist and records it as a "404" event. You'll see these in your Goals & Events panel so you can find and fix broken links. Works automatically — no setup needed.
+- **Automatic scroll depth tracking.** Pulse now tracks how far visitors scroll down each page — at 25%, 50%, 75%, and 100% milestones. These show up as scroll events in your Goals & Events panel, helping you understand which content keeps people reading. Works automatically with no configuration required.
 
 ### Improved
 
diff --git a/app/sites/[id]/page.tsx b/app/sites/[id]/page.tsx
index 31ace64..8651173 100644
--- a/app/sites/[id]/page.tsx
+++ b/app/sites/[id]/page.tsx
@@ -19,6 +19,7 @@ import TechSpecs from '@/components/dashboard/TechSpecs'
 import Chart from '@/components/dashboard/Chart'
 import PerformanceStats from '@/components/dashboard/PerformanceStats'
 import GoalStats from '@/components/dashboard/GoalStats'
+import ScrollDepth from '@/components/dashboard/ScrollDepth'
 import Campaigns from '@/components/dashboard/Campaigns'
 import {
   useDashboardOverview,
@@ -380,8 +381,9 @@ export default function SiteDashboardPage() {
         <Campaigns siteId={siteId} dateRange={dateRange} />
       </div>
 
-      <div className="mb-8">
-        <GoalStats goalCounts={goalsData?.goal_counts ?? []} />
+      <div className="grid gap-6 lg:grid-cols-2 mb-8">
+        <GoalStats goalCounts={(goalsData?.goal_counts ?? []).filter(g => !/^scroll_\d+$/.test(g.event_name))} />
+        <ScrollDepth goalCounts={goalsData?.goal_counts ?? []} totalPageviews={stats.pageviews} />
       </div>
 
       <DatePicker
diff --git a/components/dashboard/ScrollDepth.tsx b/components/dashboard/ScrollDepth.tsx
new file mode 100644
index 0000000..92f416f
--- /dev/null
+++ b/components/dashboard/ScrollDepth.tsx
@@ -0,0 +1,80 @@
+'use client'
+
+import { formatNumber } from '@ciphera-net/ui'
+import { BarChartIcon } from '@ciphera-net/ui'
+import type { GoalCountStat } from '@/lib/api/stats'
+
+interface ScrollDepthProps {
+  goalCounts: GoalCountStat[]
+  totalPageviews: number
+}
+
+const THRESHOLDS = [25, 50, 75, 100] as const
+
+export default function ScrollDepth({ goalCounts, totalPageviews }: ScrollDepthProps) {
+  const scrollCounts = new Map<number, number>()
+  for (const row of goalCounts) {
+    const match = row.event_name.match(/^scroll_(\d+)$/)
+    if (match) {
+      scrollCounts.set(Number(match[1]), row.count)
+    }
+  }
+
+  const hasData = scrollCounts.size > 0 && totalPageviews > 0
+
+  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-4">
+        <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+          Scroll Depth
+        </h3>
+      </div>
+
+      {hasData ? (
+        <div className="space-y-3 flex-1 min-h-[200px]">
+          {THRESHOLDS.map((threshold) => {
+            const count = scrollCounts.get(threshold) ?? 0
+            const pct = totalPageviews > 0 ? Math.round((count / totalPageviews) * 100) : 0
+            const barWidth = Math.max(pct, 2)
+
+            return (
+              <div key={threshold} className="space-y-1">
+                <div className="flex items-center justify-between text-sm">
+                  <span className="font-medium text-neutral-900 dark:text-white">
+                    {threshold}%
+                  </span>
+                  <div className="flex items-center gap-2">
+                    <span className="text-neutral-500 dark:text-neutral-400 tabular-nums">
+                      {formatNumber(count)}
+                    </span>
+                    <span className="font-semibold text-brand-orange tabular-nums w-12 text-right">
+                      {pct}%
+                    </span>
+                  </div>
+                </div>
+                <div className="h-2 rounded-full bg-neutral-100 dark:bg-neutral-800 overflow-hidden">
+                  <div
+                    className="h-full rounded-full bg-brand-orange transition-all duration-500"
+                    style={{ width: `${barWidth}%` }}
+                  />
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      ) : (
+        <div className="flex-1 min-h-[200px] flex flex-col items-center justify-center text-center px-6 py-8 gap-4">
+          <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
+            <BarChartIcon className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
+          </div>
+          <h4 className="font-semibold text-neutral-900 dark:text-white">
+            No scroll data yet
+          </h4>
+          <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-md">
+            Scroll depth tracking is automatic — data will appear here once visitors start scrolling on your pages.
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/public/script.js b/public/script.js
index 990e0db..ee704b6 100644
--- a/public/script.js
+++ b/public/script.js
@@ -299,6 +299,10 @@
     if (url !== lastUrl) {
       lastUrl = url;
       trackPageview();
+      // * Check for 404 after SPA navigation (deferred so title updates first)
+      setTimeout(check404, 100);
+      // * Reset scroll depth tracking for the new page
+      if (trackScroll) scrollFired = {};
     }
   }
   new MutationObserver(onUrlChange).observe(document, { subtree: true, childList: true });
@@ -308,7 +312,11 @@
   history.replaceState = function() { _replace.apply(this, arguments); onUrlChange(); };
 
   // * Track popstate (browser back/forward)
-  window.addEventListener('popstate', trackPageview);
+  window.addEventListener('popstate', function() {
+    trackPageview();
+    setTimeout(check404, 100);
+    if (trackScroll) scrollFired = {};
+  });
 
   // * Custom events / goals: validate event name (letters, numbers, underscores only; max 64 chars)
   var EVENT_NAME_MAX = 64;
@@ -346,6 +354,62 @@
   window.pulse = window.pulse || {};
   window.pulse.track = trackCustomEvent;
 
+  // * Auto-track 404 error pages (on by default)
+  // * Detects pages where document.title contains "404" or "not found"
+  // * Opt-out: add data-no-404 to the script tag
+  var track404 = !script.hasAttribute('data-no-404');
+  var sent404ForUrl = '';
+
+  function check404() {
+    if (!track404) return;
+    // * Only fire once per URL
+    var currentUrl = location.href;
+    if (sent404ForUrl === currentUrl) return;
+    if (/404|not found/i.test(document.title)) {
+      sent404ForUrl = currentUrl;
+      trackCustomEvent('404');
+    }
+  }
+
+  // * Check on initial load (deferred so SPAs can set title)
+  setTimeout(check404, 0);
+
+  // * Auto-track scroll depth at 25%, 50%, 75%, and 100% (on by default)
+  // * Each threshold fires once per pageview; resets on SPA navigation
+  // * Opt-out: add data-no-scroll to the script tag
+  var trackScroll = !script.hasAttribute('data-no-scroll');
+
+  if (trackScroll) {
+    var scrollThresholds = [25, 50, 75, 100];
+    var scrollFired = {};
+    var scrollTicking = false;
+
+    function checkScroll() {
+      var docHeight = document.documentElement.scrollHeight;
+      var viewHeight = window.innerHeight;
+      // * Page fits in viewport — nothing to scroll
+      if (docHeight <= viewHeight) return;
+      var scrollTop = window.scrollY;
+      var scrollPercent = Math.round((scrollTop + viewHeight) / docHeight * 100);
+
+      for (var i = 0; i < scrollThresholds.length; i++) {
+        var t = scrollThresholds[i];
+        if (!scrollFired[t] && scrollPercent >= t) {
+          scrollFired[t] = true;
+          trackCustomEvent('scroll_' + t);
+        }
+      }
+      scrollTicking = false;
+    }
+
+    window.addEventListener('scroll', function() {
+      if (!scrollTicking) {
+        scrollTicking = true;
+        requestAnimationFrame(checkScroll);
+      }
+    }, { passive: true });
+  }
+
   // * Auto-track outbound link clicks and file downloads (on by default)
   // * Opt-out: add data-no-outbound or data-no-downloads to the script tag
   var trackOutbound = !script.hasAttribute('data-no-outbound');

From 5677f30f3ba8a5364d867101360ac45f756003b2 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 6 Mar 2026 21:02:14 +0100
Subject: [PATCH 09/28] feat: add dashboard dimension filtering and custom
 event properties

Dashboard filtering: FilterBar pills, AddFilterDropdown with dimension/
operator/value steps, URL-serialized filters, all SWR hooks filter-aware.

Custom event properties: pulse.track() accepts props object, EventProperties
panel with auto-discovered key tabs and value bar charts, clickable goal rows.

Updated changelog with both features under v0.13.0-alpha.
---
 CHANGELOG.md                               |   4 +-
 app/sites/[id]/page.tsx                    |  80 ++++++++++++--
 components/dashboard/AddFilterDropdown.tsx | 119 +++++++++++++++++++++
 components/dashboard/EventProperties.tsx   | 108 +++++++++++++++++++
 components/dashboard/FilterBar.tsx         |  42 ++++++++
 components/dashboard/GoalStats.tsx         |   6 +-
 lib/api/stats.ts                           |  64 +++++++----
 lib/filters.ts                             |  60 +++++++++++
 lib/swr/dashboard.ts                       |  64 +++++------
 public/script.js                           |  16 ++-
 10 files changed, 497 insertions(+), 66 deletions(-)
 create mode 100644 components/dashboard/AddFilterDropdown.tsx
 create mode 100644 components/dashboard/EventProperties.tsx
 create mode 100644 components/dashboard/FilterBar.tsx
 create mode 100644 lib/filters.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a8d4725..45fb3b8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ### Added
 
+- **Dashboard filtering.** You can now filter your entire dashboard by any dimension — browser, country, page, device, OS, referrer, or UTM parameters. Click "Add filter" to pick a dimension, choose an operator (is, is not, contains, does not contain), and enter a value. Active filters appear as removable pills above your charts. You can also stack multiple filters to narrow down exactly the traffic you're looking at. Filter selections are saved in the URL, so you can bookmark or share a filtered view with your team.
+- **Custom event properties.** Your custom events can now carry extra context. For example, tracking a signup with `pulse.track('signup', { plan: 'pro', source: 'landing' })` records the plan and source alongside the event. Click any event in your Goals & Events panel to see a breakdown of its properties and values — no setup or registration needed. This helps you understand not just what happened, but why.
 - **AI traffic source identification.** Pulse now automatically recognizes visitors coming from AI tools — ChatGPT, Perplexity, Claude, Gemini, Copilot, DeepSeek, Grok, Meta AI, You.com, and Phind. These sources appear in your Top Referrers with proper brand icons and display names instead of raw domain URLs. If someone clicks a link in an AI chat to visit your site, you'll see exactly which AI tool sent them.
 - **Automatic outbound link tracking.** Pulse now tracks when visitors click links that take them to other websites. These show up as "outbound link" events in your Goals & Events panel — no setup needed. You can turn this off in your tracking snippet settings if you prefer.
 - **Automatic file download tracking.** When a visitor clicks a link to a downloadable file — PDF, ZIP, Excel, Word, MP3, and 20+ other formats — Pulse records it as a "file download" event. Like outbound links, this works automatically with no setup required.
@@ -294,7 +296,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 ---
 
 [Unreleased]: https://github.com/ciphera-net/pulse/compare/v0.13.0-alpha...HEAD
-[0.13.0-alpha]: https://github.com/ciphera-net/pulse/compare/v0.12.0-alpha...v0.13.0-alpha
+[0.13.0-alpha]: https://github.com/ciphera-net/pulse/releases/tag/v0.13.0-alpha
 [0.12.0-alpha]: https://github.com/ciphera-net/pulse/compare/v0.11.1-alpha...v0.12.0-alpha
 [0.11.1-alpha]: https://github.com/ciphera-net/pulse/compare/v0.11.0-alpha...v0.11.1-alpha
 [0.11.0-alpha]: https://github.com/ciphera-net/pulse/compare/v0.10.0-alpha...v0.11.0-alpha
diff --git a/app/sites/[id]/page.tsx b/app/sites/[id]/page.tsx
index 8651173..36532c0 100644
--- a/app/sites/[id]/page.tsx
+++ b/app/sites/[id]/page.tsx
@@ -2,8 +2,8 @@
 
 import { useAuth } from '@/lib/auth/context'
 import { logger } from '@/lib/utils/logger'
-import { useEffect, useState, useMemo } from 'react'
-import { useParams, useRouter } from 'next/navigation'
+import { useCallback, useEffect, useState, useMemo } from 'react'
+import { useParams, useRouter, useSearchParams } from 'next/navigation'
 import { motion } from 'framer-motion'
 import { getPerformanceByPage, type Stats, type DailyStat } from '@/lib/api/stats'
 import { getDateRange } from '@ciphera-net/ui'
@@ -21,6 +21,10 @@ import PerformanceStats from '@/components/dashboard/PerformanceStats'
 import GoalStats from '@/components/dashboard/GoalStats'
 import ScrollDepth from '@/components/dashboard/ScrollDepth'
 import Campaigns from '@/components/dashboard/Campaigns'
+import FilterBar from '@/components/dashboard/FilterBar'
+import AddFilterDropdown from '@/components/dashboard/AddFilterDropdown'
+import EventProperties from '@/components/dashboard/EventProperties'
+import { type DimensionFilter, serializeFilters, parseFiltersFromURL } from '@/lib/filters'
 import {
   useDashboardOverview,
   useDashboardPages,
@@ -82,6 +86,40 @@ export default function SiteDashboardPage() {
   const [lastUpdatedAt, setLastUpdatedAt] = useState<number | null>(null)
   const [, setTick] = useState(0)
 
+  // Dimension filters state
+  const searchParams = useSearchParams()
+  const [filters, setFilters] = useState<DimensionFilter[]>(() => {
+    const raw = searchParams.get('filters')
+    return raw ? parseFiltersFromURL(raw) : []
+  })
+  const filtersParam = useMemo(() => serializeFilters(filters), [filters])
+
+  // Selected event for property breakdown
+  const [selectedEvent, setSelectedEvent] = useState<string | null>(null)
+
+  const handleAddFilter = useCallback((filter: DimensionFilter) => {
+    setFilters(prev => [...prev, filter])
+  }, [])
+
+  const handleRemoveFilter = useCallback((index: number) => {
+    setFilters(prev => prev.filter((_, i) => i !== index))
+  }, [])
+
+  const handleClearFilters = useCallback(() => {
+    setFilters([])
+  }, [])
+
+  // Sync filters to URL
+  useEffect(() => {
+    const url = new URL(window.location.href)
+    if (filtersParam) {
+      url.searchParams.set('filters', filtersParam)
+    } else {
+      url.searchParams.delete('filters')
+    }
+    window.history.replaceState({}, '', url.toString())
+  }, [filtersParam])
+
   const interval = dateRange.start === dateRange.end ? todayInterval : multiDayInterval
 
   // Previous period date range for comparison
@@ -100,13 +138,14 @@ export default function SiteDashboardPage() {
 
   // SWR hooks - replace manual useState + useEffect + setInterval polling
   // Each hook handles its own refresh interval, deduplication, and error retry
-  const { data: overview, isLoading: overviewLoading, error: overviewError } = useDashboardOverview(siteId, dateRange.start, dateRange.end, interval)
-  const { data: pages } = useDashboardPages(siteId, dateRange.start, dateRange.end)
-  const { data: locations } = useDashboardLocations(siteId, dateRange.start, dateRange.end)
-  const { data: devicesData } = useDashboardDevices(siteId, dateRange.start, dateRange.end)
-  const { data: referrers } = useDashboardReferrers(siteId, dateRange.start, dateRange.end)
-  const { data: performanceData } = useDashboardPerformance(siteId, dateRange.start, dateRange.end)
-  const { data: goalsData } = useDashboardGoals(siteId, dateRange.start, dateRange.end)
+  // Filters are included in cache keys so changing filters auto-refetches
+  const { data: overview, isLoading: overviewLoading, error: overviewError } = useDashboardOverview(siteId, dateRange.start, dateRange.end, interval, filtersParam || undefined)
+  const { data: pages } = useDashboardPages(siteId, dateRange.start, dateRange.end, filtersParam || undefined)
+  const { data: locations } = useDashboardLocations(siteId, dateRange.start, dateRange.end, filtersParam || undefined)
+  const { data: devicesData } = useDashboardDevices(siteId, dateRange.start, dateRange.end, filtersParam || undefined)
+  const { data: referrers } = useDashboardReferrers(siteId, dateRange.start, dateRange.end, filtersParam || undefined)
+  const { data: performanceData } = useDashboardPerformance(siteId, dateRange.start, dateRange.end, filtersParam || undefined)
+  const { data: goalsData } = useDashboardGoals(siteId, dateRange.start, dateRange.end, filtersParam || undefined)
   const { data: realtimeData } = useRealtime(siteId)
   const { data: prevStats } = useStats(siteId, prevRange.start, prevRange.end)
   const { data: prevDailyStats } = useDailyStats(siteId, prevRange.start, prevRange.end, interval)
@@ -306,6 +345,12 @@ export default function SiteDashboardPage() {
         </div>
       </div>
 
+      {/* Dimension Filters */}
+      <div className="flex items-center gap-2 flex-wrap mb-2">
+        <FilterBar filters={filters} onRemove={handleRemoveFilter} onClear={handleClearFilters} />
+        <AddFilterDropdown onAdd={handleAddFilter} />
+      </div>
+
       {/* Advanced Chart with Integrated Stats */}
       <div className="mb-8">
         <Chart
@@ -382,10 +427,25 @@ export default function SiteDashboardPage() {
       </div>
 
       <div className="grid gap-6 lg:grid-cols-2 mb-8">
-        <GoalStats goalCounts={(goalsData?.goal_counts ?? []).filter(g => !/^scroll_\d+$/.test(g.event_name))} />
+        <GoalStats
+          goalCounts={(goalsData?.goal_counts ?? []).filter(g => !/^scroll_\d+$/.test(g.event_name))}
+          onSelectEvent={setSelectedEvent}
+        />
         <ScrollDepth goalCounts={goalsData?.goal_counts ?? []} totalPageviews={stats.pageviews} />
       </div>
 
+      {/* Event Properties Breakdown */}
+      {selectedEvent && (
+        <div className="mb-8">
+          <EventProperties
+            siteId={siteId}
+            eventName={selectedEvent}
+            dateRange={dateRange}
+            onClose={() => setSelectedEvent(null)}
+          />
+        </div>
+      )}
+
       <DatePicker
         isOpen={isDatePickerOpen}
         onClose={() => setIsDatePickerOpen(false)}
diff --git a/components/dashboard/AddFilterDropdown.tsx b/components/dashboard/AddFilterDropdown.tsx
new file mode 100644
index 0000000..5207bf0
--- /dev/null
+++ b/components/dashboard/AddFilterDropdown.tsx
@@ -0,0 +1,119 @@
+'use client'
+
+import { useState, useRef, useEffect } from 'react'
+import { DIMENSIONS, DIMENSION_LABELS, OPERATORS, OPERATOR_LABELS, type DimensionFilter } from '@/lib/filters'
+
+interface AddFilterDropdownProps {
+  onAdd: (filter: DimensionFilter) => void
+}
+
+type Step = 'dimension' | 'operator' | 'value'
+
+export default function AddFilterDropdown({ onAdd }: AddFilterDropdownProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [step, setStep] = useState<Step>('dimension')
+  const [dimension, setDimension] = useState('')
+  const [operator, setOperator] = useState<DimensionFilter['operator']>('is')
+  const [value, setValue] = useState('')
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setIsOpen(false)
+        resetState()
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
+
+  function resetState() {
+    setStep('dimension')
+    setDimension('')
+    setOperator('is')
+    setValue('')
+  }
+
+  function handleSubmit() {
+    if (!dimension || !operator || !value.trim()) return
+    onAdd({ dimension, operator, values: [value.trim()] })
+    setIsOpen(false)
+    resetState()
+  }
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        onClick={() => { setIsOpen(!isOpen); if (!isOpen) resetState() }}
+        className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-dashed border-neutral-300 dark:border-neutral-700 text-neutral-600 dark:text-neutral-400 hover:border-neutral-400 dark:hover:border-neutral-600 hover:text-neutral-700 dark:hover:text-neutral-300 transition-colors cursor-pointer"
+      >
+        <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
+        </svg>
+        Add filter
+      </button>
+
+      {isOpen && (
+        <div className="absolute top-full left-0 mt-1 z-50 w-56 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl shadow-lg overflow-hidden">
+          {step === 'dimension' && (
+            <div className="p-1">
+              <div className="px-3 py-2 text-[10px] font-semibold uppercase tracking-wider text-neutral-400">
+                Select dimension
+              </div>
+              {DIMENSIONS.map(dim => (
+                <button
+                  key={dim}
+                  onClick={() => { setDimension(dim); setStep('operator') }}
+                  className="w-full text-left px-3 py-2 text-sm text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors cursor-pointer"
+                >
+                  {DIMENSION_LABELS[dim]}
+                </button>
+              ))}
+            </div>
+          )}
+
+          {step === 'operator' && (
+            <div className="p-1">
+              <div className="px-3 py-2 text-[10px] font-semibold uppercase tracking-wider text-neutral-400">
+                {DIMENSION_LABELS[dimension]} ...
+              </div>
+              {OPERATORS.map(op => (
+                <button
+                  key={op}
+                  onClick={() => { setOperator(op); setStep('value') }}
+                  className="w-full text-left px-3 py-2 text-sm text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors cursor-pointer"
+                >
+                  {OPERATOR_LABELS[op]}
+                </button>
+              ))}
+            </div>
+          )}
+
+          {step === 'value' && (
+            <div className="p-3">
+              <div className="text-[10px] font-semibold uppercase tracking-wider text-neutral-400 mb-2">
+                {DIMENSION_LABELS[dimension]} {OPERATOR_LABELS[operator]}
+              </div>
+              <input
+                autoFocus
+                value={value}
+                onChange={e => setValue(e.target.value)}
+                onKeyDown={e => { if (e.key === 'Enter') handleSubmit() }}
+                placeholder="Enter value..."
+                className="w-full px-3 py-2 text-sm bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg text-neutral-900 dark:text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-brand-orange/30"
+              />
+              <button
+                onClick={handleSubmit}
+                disabled={!value.trim()}
+                className="w-full mt-2 px-3 py-2 text-sm font-medium bg-brand-orange text-white rounded-lg hover:bg-brand-orange/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors cursor-pointer"
+              >
+                Apply filter
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/components/dashboard/EventProperties.tsx b/components/dashboard/EventProperties.tsx
new file mode 100644
index 0000000..4adc359
--- /dev/null
+++ b/components/dashboard/EventProperties.tsx
@@ -0,0 +1,108 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { formatNumber } from '@ciphera-net/ui'
+import { getEventPropertyKeys, getEventPropertyValues, type EventPropertyKey, type EventPropertyValue } from '@/lib/api/stats'
+
+interface EventPropertiesProps {
+  siteId: string
+  eventName: string
+  dateRange: { start: string; end: string }
+  onClose: () => void
+}
+
+export default function EventProperties({ siteId, eventName, dateRange, onClose }: EventPropertiesProps) {
+  const [keys, setKeys] = useState<EventPropertyKey[]>([])
+  const [selectedKey, setSelectedKey] = useState<string | null>(null)
+  const [values, setValues] = useState<EventPropertyValue[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    setLoading(true)
+    getEventPropertyKeys(siteId, eventName, dateRange.start, dateRange.end)
+      .then(k => {
+        setKeys(k)
+        if (k.length > 0) setSelectedKey(k[0].key)
+      })
+      .finally(() => setLoading(false))
+  }, [siteId, eventName, dateRange.start, dateRange.end])
+
+  useEffect(() => {
+    if (!selectedKey) return
+    getEventPropertyValues(siteId, eventName, selectedKey, dateRange.start, dateRange.end)
+      .then(setValues)
+  }, [siteId, eventName, selectedKey, dateRange.start, dateRange.end])
+
+  const maxCount = values.length > 0 ? values[0].count : 1
+
+  return (
+    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+          Properties: <span className="text-brand-orange">{eventName.replace(/_/g, ' ')}</span>
+        </h3>
+        <button
+          onClick={onClose}
+          className="text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors cursor-pointer"
+        >
+          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+
+      {loading ? (
+        <div className="animate-pulse space-y-3">
+          {[1, 2, 3].map(i => (
+            <div key={i} className="h-8 bg-neutral-100 dark:bg-neutral-800 rounded-lg" />
+          ))}
+        </div>
+      ) : keys.length === 0 ? (
+        <p className="text-sm text-neutral-500 dark:text-neutral-400 py-4 text-center">
+          No properties recorded for this event yet.
+        </p>
+      ) : (
+        <>
+          <div className="flex gap-2 mb-4 flex-wrap">
+            {keys.map(k => (
+              <button
+                key={k.key}
+                onClick={() => setSelectedKey(k.key)}
+                className={`px-3 py-1 text-xs font-medium rounded-full transition-colors cursor-pointer ${
+                  selectedKey === k.key
+                    ? 'bg-brand-orange text-white'
+                    : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
+                }`}
+              >
+                {k.key}
+              </button>
+            ))}
+          </div>
+
+          <div className="space-y-2">
+            {values.map(v => (
+              <div key={v.value} className="flex items-center gap-3">
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center justify-between mb-1">
+                    <span className="text-sm font-medium text-neutral-900 dark:text-white truncate">
+                      {v.value}
+                    </span>
+                    <span className="text-xs font-semibold text-brand-orange tabular-nums ml-2">
+                      {formatNumber(v.count)}
+                    </span>
+                  </div>
+                  <div className="w-full h-1.5 bg-neutral-100 dark:bg-neutral-800 rounded-full overflow-hidden">
+                    <div
+                      className="h-full bg-brand-orange/60 rounded-full transition-all"
+                      style={{ width: `${(v.count / maxCount) * 100}%` }}
+                    />
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
diff --git a/components/dashboard/FilterBar.tsx b/components/dashboard/FilterBar.tsx
new file mode 100644
index 0000000..fd8a1b5
--- /dev/null
+++ b/components/dashboard/FilterBar.tsx
@@ -0,0 +1,42 @@
+'use client'
+
+import { type DimensionFilter, filterLabel } from '@/lib/filters'
+
+interface FilterBarProps {
+  filters: DimensionFilter[]
+  onRemove: (index: number) => void
+  onClear: () => void
+}
+
+export default function FilterBar({ filters, onRemove, onClear }: FilterBarProps) {
+  if (filters.length === 0) return null
+
+  return (
+    <div className="flex flex-wrap items-center gap-2 mb-4">
+      <span className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">
+        Filters
+      </span>
+      {filters.map((f, i) => (
+        <button
+          key={`${f.dimension}-${f.operator}-${f.values.join(',')}`}
+          onClick={() => onRemove(i)}
+          className="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-full bg-brand-orange/10 text-brand-orange border border-brand-orange/20 hover:bg-brand-orange/20 transition-colors cursor-pointer group"
+          title={`Remove filter: ${filterLabel(f)}`}
+        >
+          <span>{filterLabel(f)}</span>
+          <svg className="w-3 h-3 opacity-60 group-hover:opacity-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      ))}
+      {filters.length > 1 && (
+        <button
+          onClick={onClear}
+          className="text-xs text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 transition-colors cursor-pointer"
+        >
+          Clear all
+        </button>
+      )}
+    </div>
+  )
+}
diff --git a/components/dashboard/GoalStats.tsx b/components/dashboard/GoalStats.tsx
index f3f6b06..3207393 100644
--- a/components/dashboard/GoalStats.tsx
+++ b/components/dashboard/GoalStats.tsx
@@ -7,11 +7,12 @@ import type { GoalCountStat } from '@/lib/api/stats'
 
 interface GoalStatsProps {
   goalCounts: GoalCountStat[]
+  onSelectEvent?: (eventName: string) => void
 }
 
 const LIMIT = 10
 
-export default function GoalStats({ goalCounts }: GoalStatsProps) {
+export default function GoalStats({ goalCounts, onSelectEvent }: GoalStatsProps) {
   const list = (goalCounts || []).slice(0, LIMIT)
   const hasData = list.length > 0
 
@@ -28,7 +29,8 @@ export default function GoalStats({ goalCounts }: GoalStatsProps) {
           {list.map((row) => (
             <div
               key={row.event_name}
-              className="flex items-center justify-between py-2 px-3 rounded-lg bg-neutral-50 dark:bg-neutral-800/50 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+              onClick={() => onSelectEvent?.(row.event_name)}
+              className={`flex items-center justify-between py-2 px-3 rounded-lg bg-neutral-50 dark:bg-neutral-800/50 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors${onSelectEvent ? ' cursor-pointer' : ''}`}
             >
               <span className="text-sm font-medium text-neutral-900 dark:text-white truncate">
                 {row.display_name ?? row.event_name.replace(/_/g, ' ')}
diff --git a/lib/api/stats.ts b/lib/api/stats.ts
index 250af50..5e66122 100644
--- a/lib/api/stats.ts
+++ b/lib/api/stats.ts
@@ -120,6 +120,7 @@ function buildQuery(
     interval?: string
     countryLimit?: number
     sort?: string
+    filters?: string
   },
   auth?: AuthParams
 ): string {
@@ -130,6 +131,7 @@ function buildQuery(
   if (opts.interval) params.append('interval', opts.interval)
   if (opts.countryLimit != null) params.append('country_limit', opts.countryLimit.toString())
   if (opts.sort) params.append('sort', opts.sort)
+  if (opts.filters) params.append('filters', opts.filters)
   if (auth) appendAuthParams(params, auth)
   const query = params.toString()
   return query ? `?${query}` : ''
@@ -137,8 +139,8 @@ function buildQuery(
 
 /** Factory for endpoints that return an array nested under a response key. */
 function createListFetcher<T>(path: string, field: string, defaultLimit = 10) {
-  return (siteId: string, startDate?: string, endDate?: string, limit = defaultLimit): Promise<T[]> =>
-    apiRequest<Record<string, T[]>>(`/sites/${siteId}/${path}${buildQuery({ startDate, endDate, limit })}`)
+  return (siteId: string, startDate?: string, endDate?: string, limit = defaultLimit, filters?: string): Promise<T[]> =>
+    apiRequest<Record<string, T[]>>(`/sites/${siteId}/${path}${buildQuery({ startDate, endDate, limit, filters })}`)
       .then(r => r?.[field] || [])
 }
 
@@ -160,8 +162,8 @@ export const getCampaigns = createListFetcher<CampaignStat>('campaigns', 'campai
 
 // ─── Stats & Realtime ───────────────────────────────────────────────
 
-export function getStats(siteId: string, startDate?: string, endDate?: string): Promise<Stats> {
-  return apiRequest<Stats>(`/sites/${siteId}/stats${buildQuery({ startDate, endDate })}`)
+export function getStats(siteId: string, startDate?: string, endDate?: string, filters?: string): Promise<Stats> {
+  return apiRequest<Stats>(`/sites/${siteId}/stats${buildQuery({ startDate, endDate, filters })}`)
 }
 
 export function getPublicStats(siteId: string, startDate?: string, endDate?: string, auth?: AuthParams): Promise<Stats> {
@@ -178,8 +180,8 @@ export function getPublicRealtime(siteId: string, auth?: AuthParams): Promise<Re
 
 // ─── Daily Stats ────────────────────────────────────────────────────
 
-export function getDailyStats(siteId: string, startDate?: string, endDate?: string, interval?: string): Promise<DailyStat[]> {
-  return apiRequest<{ stats: DailyStat[] }>(`/sites/${siteId}/daily${buildQuery({ startDate, endDate, interval })}`)
+export function getDailyStats(siteId: string, startDate?: string, endDate?: string, interval?: string, filters?: string): Promise<DailyStat[]> {
+  return apiRequest<{ stats: DailyStat[] }>(`/sites/${siteId}/daily${buildQuery({ startDate, endDate, interval, filters })}`)
     .then(r => r?.stats || [])
 }
 
@@ -302,8 +304,8 @@ export interface DashboardGoalsData {
   goal_counts: GoalCountStat[]
 }
 
-export function getDashboardOverview(siteId: string, startDate?: string, endDate?: string, interval?: string): Promise<DashboardOverviewData> {
-  return apiRequest<DashboardOverviewData>(`/sites/${siteId}/dashboard/overview${buildQuery({ startDate, endDate, interval })}`)
+export function getDashboardOverview(siteId: string, startDate?: string, endDate?: string, interval?: string, filters?: string): Promise<DashboardOverviewData> {
+  return apiRequest<DashboardOverviewData>(`/sites/${siteId}/dashboard/overview${buildQuery({ startDate, endDate, interval, filters })}`)
 }
 
 export function getPublicDashboardOverview(
@@ -313,8 +315,8 @@ export function getPublicDashboardOverview(
   return apiRequest<DashboardOverviewData>(`/public/sites/${siteId}/dashboard/overview${buildQuery({ startDate, endDate, interval }, { password, captcha })}`)
 }
 
-export function getDashboardPages(siteId: string, startDate?: string, endDate?: string, limit = 10): Promise<DashboardPagesData> {
-  return apiRequest<DashboardPagesData>(`/sites/${siteId}/dashboard/pages${buildQuery({ startDate, endDate, limit })}`)
+export function getDashboardPages(siteId: string, startDate?: string, endDate?: string, limit = 10, filters?: string): Promise<DashboardPagesData> {
+  return apiRequest<DashboardPagesData>(`/sites/${siteId}/dashboard/pages${buildQuery({ startDate, endDate, limit, filters })}`)
 }
 
 export function getPublicDashboardPages(
@@ -324,8 +326,8 @@ export function getPublicDashboardPages(
   return apiRequest<DashboardPagesData>(`/public/sites/${siteId}/dashboard/pages${buildQuery({ startDate, endDate, limit }, { password, captcha })}`)
 }
 
-export function getDashboardLocations(siteId: string, startDate?: string, endDate?: string, limit = 10, countryLimit = 250): Promise<DashboardLocationsData> {
-  return apiRequest<DashboardLocationsData>(`/sites/${siteId}/dashboard/locations${buildQuery({ startDate, endDate, limit, countryLimit })}`)
+export function getDashboardLocations(siteId: string, startDate?: string, endDate?: string, limit = 10, countryLimit = 250, filters?: string): Promise<DashboardLocationsData> {
+  return apiRequest<DashboardLocationsData>(`/sites/${siteId}/dashboard/locations${buildQuery({ startDate, endDate, limit, countryLimit, filters })}`)
 }
 
 export function getPublicDashboardLocations(
@@ -335,8 +337,8 @@ export function getPublicDashboardLocations(
   return apiRequest<DashboardLocationsData>(`/public/sites/${siteId}/dashboard/locations${buildQuery({ startDate, endDate, limit, countryLimit }, { password, captcha })}`)
 }
 
-export function getDashboardDevices(siteId: string, startDate?: string, endDate?: string, limit = 10): Promise<DashboardDevicesData> {
-  return apiRequest<DashboardDevicesData>(`/sites/${siteId}/dashboard/devices${buildQuery({ startDate, endDate, limit })}`)
+export function getDashboardDevices(siteId: string, startDate?: string, endDate?: string, limit = 10, filters?: string): Promise<DashboardDevicesData> {
+  return apiRequest<DashboardDevicesData>(`/sites/${siteId}/dashboard/devices${buildQuery({ startDate, endDate, limit, filters })}`)
 }
 
 export function getPublicDashboardDevices(
@@ -346,8 +348,8 @@ export function getPublicDashboardDevices(
   return apiRequest<DashboardDevicesData>(`/public/sites/${siteId}/dashboard/devices${buildQuery({ startDate, endDate, limit }, { password, captcha })}`)
 }
 
-export function getDashboardReferrers(siteId: string, startDate?: string, endDate?: string, limit = 10): Promise<DashboardReferrersData> {
-  return apiRequest<DashboardReferrersData>(`/sites/${siteId}/dashboard/referrers${buildQuery({ startDate, endDate, limit })}`)
+export function getDashboardReferrers(siteId: string, startDate?: string, endDate?: string, limit = 10, filters?: string): Promise<DashboardReferrersData> {
+  return apiRequest<DashboardReferrersData>(`/sites/${siteId}/dashboard/referrers${buildQuery({ startDate, endDate, limit, filters })}`)
 }
 
 export function getPublicDashboardReferrers(
@@ -357,8 +359,8 @@ export function getPublicDashboardReferrers(
   return apiRequest<DashboardReferrersData>(`/public/sites/${siteId}/dashboard/referrers${buildQuery({ startDate, endDate, limit }, { password, captcha })}`)
 }
 
-export function getDashboardPerformance(siteId: string, startDate?: string, endDate?: string): Promise<DashboardPerformanceData> {
-  return apiRequest<DashboardPerformanceData>(`/sites/${siteId}/dashboard/performance${buildQuery({ startDate, endDate })}`)
+export function getDashboardPerformance(siteId: string, startDate?: string, endDate?: string, filters?: string): Promise<DashboardPerformanceData> {
+  return apiRequest<DashboardPerformanceData>(`/sites/${siteId}/dashboard/performance${buildQuery({ startDate, endDate, filters })}`)
 }
 
 export function getPublicDashboardPerformance(
@@ -368,8 +370,8 @@ export function getPublicDashboardPerformance(
   return apiRequest<DashboardPerformanceData>(`/public/sites/${siteId}/dashboard/performance${buildQuery({ startDate, endDate }, { password, captcha })}`)
 }
 
-export function getDashboardGoals(siteId: string, startDate?: string, endDate?: string, limit = 10): Promise<DashboardGoalsData> {
-  return apiRequest<DashboardGoalsData>(`/sites/${siteId}/dashboard/goals${buildQuery({ startDate, endDate, limit })}`)
+export function getDashboardGoals(siteId: string, startDate?: string, endDate?: string, limit = 10, filters?: string): Promise<DashboardGoalsData> {
+  return apiRequest<DashboardGoalsData>(`/sites/${siteId}/dashboard/goals${buildQuery({ startDate, endDate, limit, filters })}`)
 }
 
 export function getPublicDashboardGoals(
@@ -378,3 +380,25 @@ export function getPublicDashboardGoals(
 ): Promise<DashboardGoalsData> {
   return apiRequest<DashboardGoalsData>(`/public/sites/${siteId}/dashboard/goals${buildQuery({ startDate, endDate, limit }, { password, captcha })}`)
 }
+
+// ─── Event Properties ────────────────────────────────────────────────
+
+export interface EventPropertyKey {
+  key: string
+  count: number
+}
+
+export interface EventPropertyValue {
+  value: string
+  count: number
+}
+
+export function getEventPropertyKeys(siteId: string, eventName: string, startDate?: string, endDate?: string): Promise<EventPropertyKey[]> {
+  return apiRequest<{ keys: EventPropertyKey[] }>(`/sites/${siteId}/goals/${encodeURIComponent(eventName)}/properties${buildQuery({ startDate, endDate })}`)
+    .then(r => r?.keys || [])
+}
+
+export function getEventPropertyValues(siteId: string, eventName: string, propName: string, startDate?: string, endDate?: string, limit = 20): Promise<EventPropertyValue[]> {
+  return apiRequest<{ values: EventPropertyValue[] }>(`/sites/${siteId}/goals/${encodeURIComponent(eventName)}/properties/${encodeURIComponent(propName)}${buildQuery({ startDate, endDate, limit })}`)
+    .then(r => r?.values || [])
+}
diff --git a/lib/filters.ts b/lib/filters.ts
new file mode 100644
index 0000000..e6fbac2
--- /dev/null
+++ b/lib/filters.ts
@@ -0,0 +1,60 @@
+// * Dimension filter types and utilities for dashboard filtering
+
+export interface DimensionFilter {
+  dimension: string
+  operator: 'is' | 'is_not' | 'contains' | 'not_contains'
+  values: string[]
+}
+
+export const DIMENSION_LABELS: Record<string, string> = {
+  page: 'Page',
+  referrer: 'Referrer',
+  country: 'Country',
+  city: 'City',
+  region: 'Region',
+  browser: 'Browser',
+  os: 'OS',
+  device: 'Device',
+  utm_source: 'UTM Source',
+  utm_medium: 'UTM Medium',
+  utm_campaign: 'UTM Campaign',
+}
+
+export const OPERATOR_LABELS: Record<string, string> = {
+  is: 'is',
+  is_not: 'is not',
+  contains: 'contains',
+  not_contains: 'does not contain',
+}
+
+export const DIMENSIONS = Object.keys(DIMENSION_LABELS)
+export const OPERATORS = Object.keys(OPERATOR_LABELS) as DimensionFilter['operator'][]
+
+/** Serialize filters to query param format: "browser|is|Chrome,country|is|US" */
+export function serializeFilters(filters: DimensionFilter[]): string {
+  if (!filters.length) return ''
+  return filters
+    .map(f => `${f.dimension}|${f.operator}|${f.values.join(';')}`)
+    .join(',')
+}
+
+/** Parse filters from URL search param string */
+export function parseFiltersFromURL(raw: string): DimensionFilter[] {
+  if (!raw) return []
+  return raw.split(',').map(part => {
+    const [dimension, operator, valuesRaw] = part.split('|')
+    return {
+      dimension,
+      operator: operator as DimensionFilter['operator'],
+      values: valuesRaw?.split(';') ?? [],
+    }
+  }).filter(f => f.dimension && f.operator && f.values.length > 0)
+}
+
+/** Build display label for a filter pill */
+export function filterLabel(f: DimensionFilter): string {
+  const dim = DIMENSION_LABELS[f.dimension] || f.dimension
+  const op = OPERATOR_LABELS[f.operator] || f.operator
+  const val = f.values.length > 1 ? `${f.values[0]} +${f.values.length - 1}` : f.values[0]
+  return `${dim} ${op} ${val}`
+}
diff --git a/lib/swr/dashboard.ts b/lib/swr/dashboard.ts
index 6c55300..db2ce84 100644
--- a/lib/swr/dashboard.ts
+++ b/lib/swr/dashboard.ts
@@ -35,14 +35,14 @@ import type {
 const fetchers = {
   site: (siteId: string) => getSite(siteId),
   dashboard: (siteId: string, start: string, end: string) => getDashboard(siteId, start, end),
-  dashboardOverview: (siteId: string, start: string, end: string, interval?: string) => getDashboardOverview(siteId, start, end, interval),
-  dashboardPages: (siteId: string, start: string, end: string) => getDashboardPages(siteId, start, end),
-  dashboardLocations: (siteId: string, start: string, end: string) => getDashboardLocations(siteId, start, end),
-  dashboardDevices: (siteId: string, start: string, end: string) => getDashboardDevices(siteId, start, end),
-  dashboardReferrers: (siteId: string, start: string, end: string) => getDashboardReferrers(siteId, start, end),
-  dashboardPerformance: (siteId: string, start: string, end: string) => getDashboardPerformance(siteId, start, end),
-  dashboardGoals: (siteId: string, start: string, end: string) => getDashboardGoals(siteId, start, end),
-  stats: (siteId: string, start: string, end: string) => getStats(siteId, start, end),
+  dashboardOverview: (siteId: string, start: string, end: string, interval?: string, filters?: string) => getDashboardOverview(siteId, start, end, interval, filters),
+  dashboardPages: (siteId: string, start: string, end: string, filters?: string) => getDashboardPages(siteId, start, end, undefined, filters),
+  dashboardLocations: (siteId: string, start: string, end: string, filters?: string) => getDashboardLocations(siteId, start, end, undefined, undefined, filters),
+  dashboardDevices: (siteId: string, start: string, end: string, filters?: string) => getDashboardDevices(siteId, start, end, undefined, filters),
+  dashboardReferrers: (siteId: string, start: string, end: string, filters?: string) => getDashboardReferrers(siteId, start, end, undefined, filters),
+  dashboardPerformance: (siteId: string, start: string, end: string, filters?: string) => getDashboardPerformance(siteId, start, end, filters),
+  dashboardGoals: (siteId: string, start: string, end: string, filters?: string) => getDashboardGoals(siteId, start, end, undefined, filters),
+  stats: (siteId: string, start: string, end: string, filters?: string) => getStats(siteId, start, end, filters),
   dailyStats: (siteId: string, start: string, end: string, interval: 'hour' | 'day' | 'minute') =>
     getDailyStats(siteId, start, end, interval),
   realtime: (siteId: string) => getRealtime(siteId),
@@ -94,10 +94,10 @@ export function useDashboard(siteId: string, start: string, end: string) {
 }
 
 // * Hook for stats (refreshed less frequently)
-export function useStats(siteId: string, start: string, end: string) {
+export function useStats(siteId: string, start: string, end: string, filters?: string) {
   return useSWR<Stats>(
-    siteId && start && end ? ['stats', siteId, start, end] : null,
-    () => fetchers.stats(siteId, start, end),
+    siteId && start && end ? ['stats', siteId, start, end, filters] : null,
+    () => fetchers.stats(siteId, start, end, filters),
     {
       ...dashboardSWRConfig,
       // * Refresh every 60 seconds for stats
@@ -144,10 +144,10 @@ export function useRealtime(siteId: string, refreshInterval: number = 5000) {
 }
 
 // * Hook for focused dashboard overview data (Fix 4.2: Efficient Data Transfer)
-export function useDashboardOverview(siteId: string, start: string, end: string, interval?: string) {
+export function useDashboardOverview(siteId: string, start: string, end: string, interval?: string, filters?: string) {
   return useSWR<DashboardOverviewData>(
-    siteId && start && end ? ['dashboardOverview', siteId, start, end, interval] : null,
-    () => fetchers.dashboardOverview(siteId, start, end, interval),
+    siteId && start && end ? ['dashboardOverview', siteId, start, end, interval, filters] : null,
+    () => fetchers.dashboardOverview(siteId, start, end, interval, filters),
     {
       ...dashboardSWRConfig,
       refreshInterval: 60 * 1000,
@@ -157,10 +157,10 @@ export function useDashboardOverview(siteId: string, start: string, end: string,
 }
 
 // * Hook for focused dashboard pages data
-export function useDashboardPages(siteId: string, start: string, end: string) {
+export function useDashboardPages(siteId: string, start: string, end: string, filters?: string) {
   return useSWR<DashboardPagesData>(
-    siteId && start && end ? ['dashboardPages', siteId, start, end] : null,
-    () => fetchers.dashboardPages(siteId, start, end),
+    siteId && start && end ? ['dashboardPages', siteId, start, end, filters] : null,
+    () => fetchers.dashboardPages(siteId, start, end, filters),
     {
       ...dashboardSWRConfig,
       refreshInterval: 60 * 1000,
@@ -170,10 +170,10 @@ export function useDashboardPages(siteId: string, start: string, end: string) {
 }
 
 // * Hook for focused dashboard locations data
-export function useDashboardLocations(siteId: string, start: string, end: string) {
+export function useDashboardLocations(siteId: string, start: string, end: string, filters?: string) {
   return useSWR<DashboardLocationsData>(
-    siteId && start && end ? ['dashboardLocations', siteId, start, end] : null,
-    () => fetchers.dashboardLocations(siteId, start, end),
+    siteId && start && end ? ['dashboardLocations', siteId, start, end, filters] : null,
+    () => fetchers.dashboardLocations(siteId, start, end, filters),
     {
       ...dashboardSWRConfig,
       refreshInterval: 60 * 1000,
@@ -183,10 +183,10 @@ export function useDashboardLocations(siteId: string, start: string, end: string
 }
 
 // * Hook for focused dashboard devices data
-export function useDashboardDevices(siteId: string, start: string, end: string) {
+export function useDashboardDevices(siteId: string, start: string, end: string, filters?: string) {
   return useSWR<DashboardDevicesData>(
-    siteId && start && end ? ['dashboardDevices', siteId, start, end] : null,
-    () => fetchers.dashboardDevices(siteId, start, end),
+    siteId && start && end ? ['dashboardDevices', siteId, start, end, filters] : null,
+    () => fetchers.dashboardDevices(siteId, start, end, filters),
     {
       ...dashboardSWRConfig,
       refreshInterval: 60 * 1000,
@@ -196,10 +196,10 @@ export function useDashboardDevices(siteId: string, start: string, end: string)
 }
 
 // * Hook for focused dashboard referrers data
-export function useDashboardReferrers(siteId: string, start: string, end: string) {
+export function useDashboardReferrers(siteId: string, start: string, end: string, filters?: string) {
   return useSWR<DashboardReferrersData>(
-    siteId && start && end ? ['dashboardReferrers', siteId, start, end] : null,
-    () => fetchers.dashboardReferrers(siteId, start, end),
+    siteId && start && end ? ['dashboardReferrers', siteId, start, end, filters] : null,
+    () => fetchers.dashboardReferrers(siteId, start, end, filters),
     {
       ...dashboardSWRConfig,
       refreshInterval: 60 * 1000,
@@ -209,10 +209,10 @@ export function useDashboardReferrers(siteId: string, start: string, end: string
 }
 
 // * Hook for focused dashboard performance data
-export function useDashboardPerformance(siteId: string, start: string, end: string) {
+export function useDashboardPerformance(siteId: string, start: string, end: string, filters?: string) {
   return useSWR<DashboardPerformanceData>(
-    siteId && start && end ? ['dashboardPerformance', siteId, start, end] : null,
-    () => fetchers.dashboardPerformance(siteId, start, end),
+    siteId && start && end ? ['dashboardPerformance', siteId, start, end, filters] : null,
+    () => fetchers.dashboardPerformance(siteId, start, end, filters),
     {
       ...dashboardSWRConfig,
       refreshInterval: 60 * 1000,
@@ -222,10 +222,10 @@ export function useDashboardPerformance(siteId: string, start: string, end: stri
 }
 
 // * Hook for focused dashboard goals data
-export function useDashboardGoals(siteId: string, start: string, end: string) {
+export function useDashboardGoals(siteId: string, start: string, end: string, filters?: string) {
   return useSWR<DashboardGoalsData>(
-    siteId && start && end ? ['dashboardGoals', siteId, start, end] : null,
-    () => fetchers.dashboardGoals(siteId, start, end),
+    siteId && start && end ? ['dashboardGoals', siteId, start, end, filters] : null,
+    () => fetchers.dashboardGoals(siteId, start, end, filters),
     {
       ...dashboardSWRConfig,
       refreshInterval: 60 * 1000,
diff --git a/public/script.js b/public/script.js
index ee704b6..8c9dd01 100644
--- a/public/script.js
+++ b/public/script.js
@@ -322,7 +322,7 @@
   var EVENT_NAME_MAX = 64;
   var EVENT_NAME_REGEX = /^[a-zA-Z0-9_]+$/;
 
-  function trackCustomEvent(eventName) {
+  function trackCustomEvent(eventName, props) {
     if (typeof eventName !== 'string' || !eventName.trim()) return;
     var name = eventName.trim().toLowerCase();
     if (name.length > EVENT_NAME_MAX || !EVENT_NAME_REGEX.test(name)) {
@@ -342,6 +342,20 @@
       session_id: getSessionId(),
       name: name,
     };
+    // * Attach custom properties if provided (max 30 props, key max 200 chars, value max 2000 chars)
+    if (props && typeof props === 'object' && !Array.isArray(props)) {
+      var sanitized = {};
+      var count = 0;
+      for (var key in props) {
+        if (!props.hasOwnProperty(key)) continue;
+        if (count >= 30) break;
+        var k = String(key).substring(0, 200);
+        var v = String(props[key]).substring(0, 2000);
+        sanitized[k] = v;
+        count++;
+      }
+      if (count > 0) payload.props = sanitized;
+    }
     fetch(apiUrl + '/api/v1/events', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },

From 086577468656839e7a5c233872ca4132b2e7ea79 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 6 Mar 2026 21:15:27 +0100
Subject: [PATCH 10/28] feat: replace filter dropdown with modal, add
 click-to-filter on all panels

- Filter button is now a solid pill that opens a centered modal with
  dimension grid and operator/value selection
- Clicking any row in TopReferrers, TechSpecs, Locations, or ContentStats
  adds an "is" filter for that dimension and value
- ContentStats preserves the external link icon separately via stopPropagation
---
 app/sites/[id]/page.tsx                    |   4 +
 components/dashboard/AddFilterDropdown.tsx | 144 ++++++++++-----------
 components/dashboard/ContentStats.tsx      |  17 ++-
 components/dashboard/Locations.tsx         |  45 ++++---
 components/dashboard/TechSpecs.tsx         |  34 +++--
 components/dashboard/TopReferrers.tsx      |  10 +-
 6 files changed, 147 insertions(+), 107 deletions(-)

diff --git a/app/sites/[id]/page.tsx b/app/sites/[id]/page.tsx
index 36532c0..4646267 100644
--- a/app/sites/[id]/page.tsx
+++ b/app/sites/[id]/page.tsx
@@ -391,12 +391,14 @@ export default function SiteDashboardPage() {
           collectPagePaths={site.collect_page_paths ?? true}
           siteId={siteId}
           dateRange={dateRange}
+          onFilter={handleAddFilter}
         />
         <TopReferrers
           referrers={referrers?.top_referrers ?? []}
           collectReferrers={site.collect_referrers ?? true}
           siteId={siteId}
           dateRange={dateRange}
+          onFilter={handleAddFilter}
         />
       </div>
 
@@ -408,6 +410,7 @@ export default function SiteDashboardPage() {
           geoDataLevel={site.collect_geo_data || 'full'}
           siteId={siteId}
           dateRange={dateRange}
+          onFilter={handleAddFilter}
         />
         <TechSpecs
           browsers={devicesData?.browsers ?? []}
@@ -418,6 +421,7 @@ export default function SiteDashboardPage() {
           collectScreenResolution={site.collect_screen_resolution ?? true}
           siteId={siteId}
           dateRange={dateRange}
+          onFilter={handleAddFilter}
         />
       </div>
 
diff --git a/components/dashboard/AddFilterDropdown.tsx b/components/dashboard/AddFilterDropdown.tsx
index 5207bf0..ee795ab 100644
--- a/components/dashboard/AddFilterDropdown.tsx
+++ b/components/dashboard/AddFilterDropdown.tsx
@@ -1,40 +1,30 @@
 'use client'
 
-import { useState, useRef, useEffect } from 'react'
+import { useState } from 'react'
+import { Modal } from '@ciphera-net/ui'
 import { DIMENSIONS, DIMENSION_LABELS, OPERATORS, OPERATOR_LABELS, type DimensionFilter } from '@/lib/filters'
 
 interface AddFilterDropdownProps {
   onAdd: (filter: DimensionFilter) => void
 }
 
-type Step = 'dimension' | 'operator' | 'value'
-
 export default function AddFilterDropdown({ onAdd }: AddFilterDropdownProps) {
   const [isOpen, setIsOpen] = useState(false)
-  const [step, setStep] = useState<Step>('dimension')
   const [dimension, setDimension] = useState('')
   const [operator, setOperator] = useState<DimensionFilter['operator']>('is')
   const [value, setValue] = useState('')
-  const ref = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    function handleClickOutside(e: MouseEvent) {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
-        setIsOpen(false)
-        resetState()
-      }
-    }
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => document.removeEventListener('mousedown', handleClickOutside)
-  }, [])
 
   function resetState() {
-    setStep('dimension')
     setDimension('')
     setOperator('is')
     setValue('')
   }
 
+  function handleOpen() {
+    resetState()
+    setIsOpen(true)
+  }
+
   function handleSubmit() {
     if (!dimension || !operator || !value.trim()) return
     onAdd({ dimension, operator, values: [value.trim()] })
@@ -42,78 +32,88 @@ export default function AddFilterDropdown({ onAdd }: AddFilterDropdownProps) {
     resetState()
   }
 
+  const hasDimension = dimension !== ''
+
   return (
-    <div className="relative" ref={ref}>
+    <>
       <button
-        onClick={() => { setIsOpen(!isOpen); if (!isOpen) resetState() }}
-        className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-dashed border-neutral-300 dark:border-neutral-700 text-neutral-600 dark:text-neutral-400 hover:border-neutral-400 dark:hover:border-neutral-600 hover:text-neutral-700 dark:hover:text-neutral-300 transition-colors cursor-pointer"
+        onClick={handleOpen}
+        className="inline-flex items-center gap-2 px-3 py-1.5 text-xs font-medium rounded-lg bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700 hover:text-neutral-900 dark:hover:text-white transition-colors cursor-pointer"
       >
         <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-          <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
+          <path strokeLinecap="round" strokeLinejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
         </svg>
-        Add filter
+        Filter
       </button>
 
-      {isOpen && (
-        <div className="absolute top-full left-0 mt-1 z-50 w-56 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl shadow-lg overflow-hidden">
-          {step === 'dimension' && (
-            <div className="p-1">
-              <div className="px-3 py-2 text-[10px] font-semibold uppercase tracking-wider text-neutral-400">
-                Select dimension
-              </div>
-              {DIMENSIONS.map(dim => (
-                <button
-                  key={dim}
-                  onClick={() => { setDimension(dim); setStep('operator') }}
-                  className="w-full text-left px-3 py-2 text-sm text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors cursor-pointer"
-                >
-                  {DIMENSION_LABELS[dim]}
-                </button>
-              ))}
+      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title="Add Filter">
+        {!hasDimension ? (
+          <div className="grid grid-cols-2 gap-2">
+            {DIMENSIONS.map(dim => (
+              <button
+                key={dim}
+                onClick={() => setDimension(dim)}
+                className="text-left px-4 py-3 text-sm font-medium rounded-xl border border-neutral-200 dark:border-neutral-700 text-neutral-700 dark:text-neutral-300 hover:border-brand-orange hover:text-brand-orange dark:hover:border-brand-orange dark:hover:text-brand-orange transition-colors cursor-pointer"
+              >
+                {DIMENSION_LABELS[dim]}
+              </button>
+            ))}
+          </div>
+        ) : (
+          <div className="space-y-5">
+            {/* Selected dimension header */}
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => { setDimension(''); setOperator('is'); setValue('') }}
+                className="text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors cursor-pointer"
+              >
+                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+                </svg>
+              </button>
+              <span className="text-sm font-semibold text-neutral-900 dark:text-white">
+                {DIMENSION_LABELS[dimension]}
+              </span>
             </div>
-          )}
 
-          {step === 'operator' && (
-            <div className="p-1">
-              <div className="px-3 py-2 text-[10px] font-semibold uppercase tracking-wider text-neutral-400">
-                {DIMENSION_LABELS[dimension]} ...
-              </div>
+            {/* Operator selection */}
+            <div className="flex gap-2 flex-wrap">
               {OPERATORS.map(op => (
                 <button
                   key={op}
-                  onClick={() => { setOperator(op); setStep('value') }}
-                  className="w-full text-left px-3 py-2 text-sm text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors cursor-pointer"
+                  onClick={() => setOperator(op)}
+                  className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors cursor-pointer ${
+                    operator === op
+                      ? 'bg-brand-orange text-white'
+                      : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
+                  }`}
                 >
                   {OPERATOR_LABELS[op]}
                 </button>
               ))}
             </div>
-          )}
 
-          {step === 'value' && (
-            <div className="p-3">
-              <div className="text-[10px] font-semibold uppercase tracking-wider text-neutral-400 mb-2">
-                {DIMENSION_LABELS[dimension]} {OPERATOR_LABELS[operator]}
-              </div>
-              <input
-                autoFocus
-                value={value}
-                onChange={e => setValue(e.target.value)}
-                onKeyDown={e => { if (e.key === 'Enter') handleSubmit() }}
-                placeholder="Enter value..."
-                className="w-full px-3 py-2 text-sm bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg text-neutral-900 dark:text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-brand-orange/30"
-              />
-              <button
-                onClick={handleSubmit}
-                disabled={!value.trim()}
-                className="w-full mt-2 px-3 py-2 text-sm font-medium bg-brand-orange text-white rounded-lg hover:bg-brand-orange/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors cursor-pointer"
-              >
-                Apply filter
-              </button>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
+            {/* Value input */}
+            <input
+              autoFocus
+              value={value}
+              onChange={e => setValue(e.target.value)}
+              onKeyDown={e => { if (e.key === 'Enter') handleSubmit() }}
+              placeholder={`Enter ${DIMENSION_LABELS[dimension].toLowerCase()} value...`}
+              className="w-full px-4 py-3 text-sm bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl text-neutral-900 dark:text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-brand-orange/40 focus:border-brand-orange transition-colors"
+            />
+
+            {/* Apply */}
+            <button
+              onClick={handleSubmit}
+              disabled={!value.trim()}
+              className="w-full px-4 py-3 text-sm font-semibold bg-brand-orange text-white rounded-xl hover:bg-brand-orange/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors cursor-pointer"
+            >
+              Apply Filter
+            </button>
+          </div>
+        )}
+      </Modal>
+    </>
   )
 }
diff --git a/components/dashboard/ContentStats.tsx b/components/dashboard/ContentStats.tsx
index d2eeea7..ad159bf 100644
--- a/components/dashboard/ContentStats.tsx
+++ b/components/dashboard/ContentStats.tsx
@@ -7,6 +7,7 @@ import { useTabListKeyboard } from '@/lib/hooks/useTabListKeyboard'
 import { TopPage, getTopPages, getEntryPages, getExitPages } from '@/lib/api/stats'
 import { Modal, ArrowUpRightIcon, LayoutDashboardIcon } from '@ciphera-net/ui'
 import { ListSkeleton } from '@/components/skeletons'
+import { type DimensionFilter } from '@/lib/filters'
 
 interface ContentStatsProps {
   topPages: TopPage[]
@@ -16,13 +17,14 @@ interface ContentStatsProps {
   collectPagePaths?: boolean
   siteId: string
   dateRange: { start: string, end: string }
+  onFilter?: (filter: DimensionFilter) => void
 }
 
 type Tab = 'top_pages' | 'entry_pages' | 'exit_pages'
 
 const LIMIT = 7
 
-export default function ContentStats({ topPages, entryPages, exitPages, domain, collectPagePaths = true, siteId, dateRange }: ContentStatsProps) {
+export default function ContentStats({ topPages, entryPages, exitPages, domain, collectPagePaths = true, siteId, dateRange, onFilter }: ContentStatsProps) {
   const [activeTab, setActiveTab] = useState<Tab>('top_pages')
   const handleTabKeyDown = useTabListKeyboard()
   const [isModalOpen, setIsModalOpen] = useState(false)
@@ -133,16 +135,21 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
           ) : hasData ? (
             <>
               {displayedData.map((page) => (
-                <div key={page.path} 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
+                  key={page.path}
+                  onClick={() => onFilter?.({ dimension: 'page', operator: 'is', values: [page.path] })}
+                  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${onFilter ? ' cursor-pointer' : ''}`}
+                >
                   <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center">
+                    <span className="truncate">{page.path}</span>
                     <a
                       href={`https://${domain.replace(/^https?:\/\//, '')}${page.path}`}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="hover:underline flex items-center"
+                      onClick={e => e.stopPropagation()}
+                      className="ml-2 flex-shrink-0"
                     >
-                      {page.path}
-                      <ArrowUpRightIcon className="w-3 h-3 ml-2 text-neutral-400 opacity-0 group-hover:opacity-100 transition-opacity" />
+                      <ArrowUpRightIcon className="w-3 h-3 text-neutral-400 opacity-0 group-hover:opacity-100 transition-opacity hover:text-brand-orange" />
                     </a>
                   </div>
                   <div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
diff --git a/components/dashboard/Locations.tsx b/components/dashboard/Locations.tsx
index 5699188..f6c24df 100644
--- a/components/dashboard/Locations.tsx
+++ b/components/dashboard/Locations.tsx
@@ -12,6 +12,7 @@ import { ListSkeleton } from '@/components/skeletons'
 import { SiTorproject } from 'react-icons/si'
 import { FaUserSecret, FaSatellite } from 'react-icons/fa'
 import { getCountries, getCities, getRegions } from '@/lib/api/stats'
+import { type DimensionFilter } from '@/lib/filters'
 
 interface LocationProps {
   countries: Array<{ country: string; pageviews: number }>
@@ -20,13 +21,16 @@ interface LocationProps {
   geoDataLevel?: 'full' | 'country' | 'none'
   siteId: string
   dateRange: { start: string, end: string }
+  onFilter?: (filter: DimensionFilter) => void
 }
 
 type Tab = 'map' | 'countries' | 'regions' | 'cities'
 
 const LIMIT = 7
 
-export default function Locations({ countries, cities, regions, geoDataLevel = 'full', siteId, dateRange }: LocationProps) {
+const TAB_TO_DIMENSION: Record<string, string> = { countries: 'country', regions: 'region', cities: 'city' }
+
+export default function Locations({ countries, cities, regions, geoDataLevel = 'full', siteId, dateRange, onFilter }: LocationProps) {
   const [activeTab, setActiveTab] = useState<Tab>('map')
   const handleTabKeyDown = useTabListKeyboard()
   const [isModalOpen, setIsModalOpen] = useState(false)
@@ -247,23 +251,30 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
           ) : (
             hasData ? (
               <>
-                {displayedData.map((item) => (
-                  <div key={`${item.country ?? ''}-${item.region ?? ''}-${item.city ?? ''}`} 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-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
-                      {activeTab === 'countries' && <span className="shrink-0">{getFlagComponent(item.country ?? '')}</span>}
-                      {activeTab !== 'countries' && <span className="shrink-0">{getFlagComponent(item.country ?? '')}</span>}
-
-                      <span className="truncate">
-                        {activeTab === 'countries' ? getCountryName(item.country ?? '') :
-                         activeTab === 'regions' ? getRegionName(item.region ?? '', item.country ?? '') :
-                         getCityName(item.city ?? '')}
-                      </span>
+                {displayedData.map((item) => {
+                  const dim = TAB_TO_DIMENSION[activeTab]
+                  const filterValue = activeTab === 'countries' ? item.country : activeTab === 'regions' ? item.region : item.city
+                  const canFilter = onFilter && dim && filterValue
+                  return (
+                    <div
+                      key={`${item.country ?? ''}-${item.region ?? ''}-${item.city ?? ''}`}
+                      onClick={() => canFilter && onFilter({ dimension: dim, operator: 'is', values: [filterValue!] })}
+                      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${canFilter ? ' cursor-pointer' : ''}`}
+                    >
+                      <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
+                        <span className="shrink-0">{getFlagComponent(item.country ?? '')}</span>
+                        <span className="truncate">
+                          {activeTab === 'countries' ? getCountryName(item.country ?? '') :
+                           activeTab === 'regions' ? getRegionName(item.region ?? '', item.country ?? '') :
+                           getCityName(item.city ?? '')}
+                        </span>
+                      </div>
+                      <div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
+                        {formatNumber(item.pageviews)}
+                      </div>
                     </div>
-                    <div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
-                      {formatNumber(item.pageviews)}
-                    </div>
-                  </div>
-                ))}
+                  )
+                })}
                 {Array.from({ length: emptySlots }).map((_, i) => (
                   <div key={`empty-${i}`} className="h-9 px-2 -mx-2" aria-hidden="true" />
               ))}
diff --git a/components/dashboard/TechSpecs.tsx b/components/dashboard/TechSpecs.tsx
index f4bd4cd..4664aa1 100644
--- a/components/dashboard/TechSpecs.tsx
+++ b/components/dashboard/TechSpecs.tsx
@@ -9,6 +9,7 @@ import { MdMonitor } from 'react-icons/md'
 import { Modal, GridIcon } from '@ciphera-net/ui'
 import { ListSkeleton } from '@/components/skeletons'
 import { getBrowsers, getOS, getDevices, getScreenResolutions } from '@/lib/api/stats'
+import { type DimensionFilter } from '@/lib/filters'
 
 interface TechSpecsProps {
   browsers: Array<{ browser: string; pageviews: number }>
@@ -19,13 +20,16 @@ interface TechSpecsProps {
   collectScreenResolution?: boolean
   siteId: string
   dateRange: { start: string, end: string }
+  onFilter?: (filter: DimensionFilter) => void
 }
 
 type Tab = 'browsers' | 'os' | 'devices' | 'screens'
 
 const LIMIT = 7
 
-export default function TechSpecs({ browsers, os, devices, screenResolutions, collectDeviceInfo = true, collectScreenResolution = true, siteId, dateRange }: TechSpecsProps) {
+const TAB_TO_DIMENSION: Record<string, string> = { browsers: 'browser', os: 'os', devices: 'device' }
+
+export default function TechSpecs({ browsers, os, devices, screenResolutions, collectDeviceInfo = true, collectScreenResolution = true, siteId, dateRange, onFilter }: TechSpecsProps) {
   const [activeTab, setActiveTab] = useState<Tab>('browsers')
   const handleTabKeyDown = useTabListKeyboard()
   const [isModalOpen, setIsModalOpen] = useState(false)
@@ -156,17 +160,25 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
             </div>
           ) : hasData ? (
             <>
-              {displayedData.map((item) => (
-                <div key={item.name} 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-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
-                    {item.icon && <span className="text-lg">{item.icon}</span>}
-                    <span className="truncate">{item.name}</span>
+              {displayedData.map((item) => {
+                const dim = TAB_TO_DIMENSION[activeTab]
+                const canFilter = onFilter && dim
+                return (
+                  <div
+                    key={item.name}
+                    onClick={() => canFilter && onFilter({ dimension: dim, operator: 'is', values: [item.name] })}
+                    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${canFilter ? ' cursor-pointer' : ''}`}
+                  >
+                    <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
+                      {item.icon && <span className="text-lg">{item.icon}</span>}
+                      <span className="truncate">{item.name}</span>
+                    </div>
+                    <div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
+                      {formatNumber(item.pageviews)}
+                    </div>
                   </div>
-                  <div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
-                    {formatNumber(item.pageviews)}
-                  </div>
-                </div>
-              ))}
+                )
+              })}
               {Array.from({ length: emptySlots }).map((_, i) => (
                 <div key={`empty-${i}`} className="h-9 px-2 -mx-2" aria-hidden="true" />
               ))}
diff --git a/components/dashboard/TopReferrers.tsx b/components/dashboard/TopReferrers.tsx
index 05cb903..e6a38be 100644
--- a/components/dashboard/TopReferrers.tsx
+++ b/components/dashboard/TopReferrers.tsx
@@ -8,17 +8,19 @@ import { getReferrerDisplayName, getReferrerFavicon, getReferrerIcon, mergeRefer
 import { Modal, GlobeIcon } from '@ciphera-net/ui'
 import { ListSkeleton } from '@/components/skeletons'
 import { getTopReferrers, TopReferrer } from '@/lib/api/stats'
+import { type DimensionFilter } from '@/lib/filters'
 
 interface TopReferrersProps {
   referrers: Array<{ referrer: string; pageviews: number }>
   collectReferrers?: boolean
   siteId: string
   dateRange: { start: string, end: string }
+  onFilter?: (filter: DimensionFilter) => void
 }
 
 const LIMIT = 7
 
-export default function TopReferrers({ referrers, collectReferrers = true, siteId, dateRange }: TopReferrersProps) {
+export default function TopReferrers({ referrers, collectReferrers = true, siteId, dateRange, onFilter }: TopReferrersProps) {
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [fullData, setFullData] = useState<TopReferrer[]>([])
   const [isLoadingFull, setIsLoadingFull] = useState(false)
@@ -103,7 +105,11 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
           ) : hasData ? (
             <>
               {displayedReferrers.map((ref) => (
-                <div key={ref.referrer} 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
+                  key={ref.referrer}
+                  onClick={() => onFilter?.({ dimension: 'referrer', operator: 'is', values: [ref.referrer] })}
+                  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${onFilter ? ' cursor-pointer' : ''}`}
+                >
                   <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
                     {renderReferrerIcon(ref.referrer)}
                     <span className="truncate" title={ref.referrer}>{getReferrerDisplayName(ref.referrer)}</span>

From ec96fa8a0dc1bc7b0810577e88b0abb02c8d3160 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 6 Mar 2026 22:25:15 +0100
Subject: [PATCH 11/28] feat: add hover percentage indicator on dashboard panel
 rows

Shows percentage of total pageviews on hover with a slide-in animation from right to left across all panels (Content, Locations, Technology, Top Referrers).
---
 components/dashboard/ContentStats.tsx | 10 ++++++++--
 components/dashboard/Locations.tsx    | 10 ++++++++--
 components/dashboard/TechSpecs.tsx    | 10 ++++++++--
 components/dashboard/TopReferrers.tsx | 10 ++++++++--
 4 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/components/dashboard/ContentStats.tsx b/components/dashboard/ContentStats.tsx
index ad159bf..cb84514 100644
--- a/components/dashboard/ContentStats.tsx
+++ b/components/dashboard/ContentStats.tsx
@@ -78,6 +78,7 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
   }
 
   const data = getData()
+  const totalPageviews = data.reduce((sum, p) => sum + p.pageviews, 0)
   const hasData = data && data.length > 0
   const displayedData = hasData ? data.slice(0, LIMIT) : []
   const emptySlots = Math.max(0, LIMIT - displayedData.length)
@@ -152,8 +153,13 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
                       <ArrowUpRightIcon className="w-3 h-3 text-neutral-400 opacity-0 group-hover:opacity-100 transition-opacity hover:text-brand-orange" />
                     </a>
                   </div>
-                  <div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
-                    {formatNumber(page.pageviews)}
+                  <div className="flex items-center gap-2 ml-4">
+                    <span className="text-xs text-neutral-400 dark:text-neutral-500 opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
+                      {totalPageviews > 0 ? `${Math.round((page.pageviews / totalPageviews) * 100)}%` : ''}
+                    </span>
+                    <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+                      {formatNumber(page.pageviews)}
+                    </span>
                   </div>
                 </div>
               ))}
diff --git a/components/dashboard/Locations.tsx b/components/dashboard/Locations.tsx
index f6c24df..5a7e27b 100644
--- a/components/dashboard/Locations.tsx
+++ b/components/dashboard/Locations.tsx
@@ -176,6 +176,7 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
 
   const rawData = activeTab === 'map' ? [] : getData()
   const data = filterUnknown(rawData)
+  const totalPageviews = data.reduce((sum, item) => sum + item.pageviews, 0)
   const hasData = activeTab === 'map'
     ? (countries && filterUnknown(countries).length > 0)
     : (data && data.length > 0)
@@ -269,8 +270,13 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
                            getCityName(item.city ?? '')}
                         </span>
                       </div>
-                      <div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
-                        {formatNumber(item.pageviews)}
+                      <div className="flex items-center gap-2 ml-4">
+                        <span className="text-xs text-neutral-400 dark:text-neutral-500 opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
+                          {totalPageviews > 0 ? `${Math.round((item.pageviews / totalPageviews) * 100)}%` : ''}
+                        </span>
+                        <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+                          {formatNumber(item.pageviews)}
+                        </span>
                       </div>
                     </div>
                   )
diff --git a/components/dashboard/TechSpecs.tsx b/components/dashboard/TechSpecs.tsx
index 4664aa1..5f9240e 100644
--- a/components/dashboard/TechSpecs.tsx
+++ b/components/dashboard/TechSpecs.tsx
@@ -112,6 +112,7 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
 
   const rawData = getRawData()
   const data = filterUnknown(rawData)
+  const totalPageviews = data.reduce((sum, item) => sum + item.pageviews, 0)
   const hasData = data && data.length > 0
   const displayedData = hasData ? data.slice(0, LIMIT) : []
   const emptySlots = Math.max(0, LIMIT - displayedData.length)
@@ -173,8 +174,13 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
                       {item.icon && <span className="text-lg">{item.icon}</span>}
                       <span className="truncate">{item.name}</span>
                     </div>
-                    <div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
-                      {formatNumber(item.pageviews)}
+                    <div className="flex items-center gap-2 ml-4">
+                      <span className="text-xs text-neutral-400 dark:text-neutral-500 opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
+                        {totalPageviews > 0 ? `${Math.round((item.pageviews / totalPageviews) * 100)}%` : ''}
+                      </span>
+                      <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+                        {formatNumber(item.pageviews)}
+                      </span>
                     </div>
                   </div>
                 )
diff --git a/components/dashboard/TopReferrers.tsx b/components/dashboard/TopReferrers.tsx
index e6a38be..fed4cd6 100644
--- a/components/dashboard/TopReferrers.tsx
+++ b/components/dashboard/TopReferrers.tsx
@@ -33,6 +33,7 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
 
   const mergedReferrers = mergeReferrersByDisplayName(filteredReferrers)
 
+  const totalPageviews = mergedReferrers.reduce((sum, r) => sum + r.pageviews, 0)
   const hasData = mergedReferrers.length > 0
   const displayedReferrers = hasData ? mergedReferrers.slice(0, LIMIT) : []
   const emptySlots = Math.max(0, LIMIT - displayedReferrers.length)
@@ -114,8 +115,13 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
                     {renderReferrerIcon(ref.referrer)}
                     <span className="truncate" title={ref.referrer}>{getReferrerDisplayName(ref.referrer)}</span>
                   </div>
-                  <div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
-                    {formatNumber(ref.pageviews)}
+                  <div className="flex items-center gap-2 ml-4">
+                    <span className="text-xs text-neutral-400 dark:text-neutral-500 opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
+                      {totalPageviews > 0 ? `${Math.round((ref.pageviews / totalPageviews) * 100)}%` : ''}
+                    </span>
+                    <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+                      {formatNumber(ref.pageviews)}
+                    </span>
                   </div>
                 </div>
               ))}

From 0809c37067e0483997c0d62b95dc8d687c470a90 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 6 Mar 2026 22:40:57 +0100
Subject: [PATCH 12/28] fix: prevent duplicate filters, support Direct
 referrer, pass filters to Campaigns

- Deduplicate filters so clicking the same item twice doesn't stack identical pills
- Normalize "Direct" referrer to empty string so direct traffic filtering works
- Pass active filters through to Campaigns component so it respects dashboard filters
---
 CHANGELOG.md                       | 14 ++++++++++++++
 app/sites/[id]/page.tsx            | 15 +++++++++++++--
 components/dashboard/Campaigns.tsx | 11 ++++++-----
 lib/filters.ts                     |  4 +++-
 4 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 45fb3b8..1b98cb8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,20 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
+## [0.13.1-alpha] - 2026-03-06
+
+### Added
+
+- **Hover percentages on dashboard panels.** When you hover over any item in the Content, Locations, Technology, or Top Referrers panels, a percentage now smoothly slides in next to the count — showing you at a glance how much of total traffic that item represents.
+- **Click any item to filter your dashboard.** Clicking a referrer, browser, country, city, page, OS, or device in any dashboard panel now instantly filters your entire dashboard to show only that traffic. No need to open the filter modal — just click the item you're curious about.
+- **Redesigned filter button.** The old dashed "Add filter" dropdown has been replaced with a clean modal. Pick a dimension from a visual grid, choose an operator, enter a value, and apply — all in a focused overlay.
+
+### Fixed
+
+- **Clicking the same item no longer creates duplicate filters.** Previously, clicking the same referrer or browser multiple times would stack identical filter pills. Now the dashboard recognizes you already have that filter active and ignores the duplicate.
+- **"Direct" traffic can now be filtered.** Typing "Direct" as a referrer filter value now correctly matches visitors who arrived without a referrer. Previously this showed zero results because the system didn't recognize "Direct" as a special value.
+- **Campaigns now respect active filters.** The Campaigns panel previously ignored your active filters — so if you filtered by a specific referrer or country, campaigns still showed all data. Campaigns now filter along with the rest of your dashboard.
+
 ## [0.13.0-alpha] - 2026-03-02
 
 ### Added
diff --git a/app/sites/[id]/page.tsx b/app/sites/[id]/page.tsx
index 4646267..24a18e1 100644
--- a/app/sites/[id]/page.tsx
+++ b/app/sites/[id]/page.tsx
@@ -98,7 +98,18 @@ export default function SiteDashboardPage() {
   const [selectedEvent, setSelectedEvent] = useState<string | null>(null)
 
   const handleAddFilter = useCallback((filter: DimensionFilter) => {
-    setFilters(prev => [...prev, filter])
+    // Normalize "Direct" referrer to empty string (direct traffic has no referrer in DB)
+    const normalized = { ...filter }
+    if (normalized.dimension === 'referrer') {
+      normalized.values = normalized.values.map(v => v.toLowerCase() === 'direct' ? '' : v)
+    }
+    setFilters(prev => {
+      const isDuplicate = prev.some(
+        f => f.dimension === normalized.dimension && f.operator === normalized.operator && f.values.join(';') === normalized.values.join(';')
+      )
+      if (isDuplicate) return prev
+      return [...prev, normalized]
+    })
   }, [])
 
   const handleRemoveFilter = useCallback((index: number) => {
@@ -427,7 +438,7 @@ export default function SiteDashboardPage() {
 
       {/* Campaigns Report */}
       <div className="mb-8">
-        <Campaigns siteId={siteId} dateRange={dateRange} />
+        <Campaigns siteId={siteId} dateRange={dateRange} filters={filtersParam || undefined} />
       </div>
 
       <div className="grid gap-6 lg:grid-cols-2 mb-8">
diff --git a/components/dashboard/Campaigns.tsx b/components/dashboard/Campaigns.tsx
index 31bed08..f8f49ab 100644
--- a/components/dashboard/Campaigns.tsx
+++ b/components/dashboard/Campaigns.tsx
@@ -17,6 +17,7 @@ import UtmBuilder from '@/components/tools/UtmBuilder'
 interface CampaignsProps {
   siteId: string
   dateRange: { start: string, end: string }
+  filters?: string
 }
 
 const LIMIT = 7
@@ -41,7 +42,7 @@ function campaignRowKey(item: CampaignStat): string {
   return `${item.source}|${item.medium}|${item.campaign}`
 }
 
-export default function Campaigns({ siteId, dateRange }: CampaignsProps) {
+export default function Campaigns({ siteId, dateRange, filters }: CampaignsProps) {
   const [data, setData] = useState<CampaignStat[]>([])
   const [isLoading, setIsLoading] = useState(true)
   const [isModalOpen, setIsModalOpen] = useState(false)
@@ -56,7 +57,7 @@ export default function Campaigns({ siteId, dateRange }: CampaignsProps) {
     const fetchData = async () => {
       setIsLoading(true)
       try {
-        const result = await getCampaigns(siteId, dateRange.start, dateRange.end, 10)
+        const result = await getCampaigns(siteId, dateRange.start, dateRange.end, 10, filters)
         setData(result)
       } catch (e) {
         logger.error(e)
@@ -65,14 +66,14 @@ export default function Campaigns({ siteId, dateRange }: CampaignsProps) {
       }
     }
     fetchData()
-  }, [siteId, dateRange])
+  }, [siteId, dateRange, filters])
 
   useEffect(() => {
     if (isModalOpen) {
       const fetchFullData = async () => {
         setIsLoadingFull(true)
         try {
-          const result = await getCampaigns(siteId, dateRange.start, dateRange.end, 100)
+          const result = await getCampaigns(siteId, dateRange.start, dateRange.end, 100, filters)
           setFullData(result)
         } catch (e) {
           logger.error(e)
@@ -84,7 +85,7 @@ export default function Campaigns({ siteId, dateRange }: CampaignsProps) {
     } else {
       setFullData([])
     }
-  }, [isModalOpen, siteId, dateRange])
+  }, [isModalOpen, siteId, dateRange, filters])
 
   const sortedData = useMemo(
     () => sortCampaigns(data, sortKey, sortDir),
diff --git a/lib/filters.ts b/lib/filters.ts
index e6fbac2..608083a 100644
--- a/lib/filters.ts
+++ b/lib/filters.ts
@@ -55,6 +55,8 @@ export function parseFiltersFromURL(raw: string): DimensionFilter[] {
 export function filterLabel(f: DimensionFilter): string {
   const dim = DIMENSION_LABELS[f.dimension] || f.dimension
   const op = OPERATOR_LABELS[f.operator] || f.operator
-  const val = f.values.length > 1 ? `${f.values[0]} +${f.values.length - 1}` : f.values[0]
+  const rawVal = f.values.length > 1 ? `${f.values[0]} +${f.values.length - 1}` : f.values[0]
+  // Show "Direct" for empty referrer values (direct traffic has no referrer in DB)
+  const val = f.dimension === 'referrer' && rawVal === '' ? 'Direct' : rawVal
   return `${dim} ${op} ${val}`
 }

From 34053004c040519a15df202093d5f7171b2f8625 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 6 Mar 2026 22:43:05 +0100
Subject: [PATCH 13/28] style: use brand orange for hover percentage indicators

---
 components/dashboard/ContentStats.tsx | 2 +-
 components/dashboard/Locations.tsx    | 2 +-
 components/dashboard/TechSpecs.tsx    | 2 +-
 components/dashboard/TopReferrers.tsx | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/dashboard/ContentStats.tsx b/components/dashboard/ContentStats.tsx
index cb84514..4339bd0 100644
--- a/components/dashboard/ContentStats.tsx
+++ b/components/dashboard/ContentStats.tsx
@@ -154,7 +154,7 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
                     </a>
                   </div>
                   <div className="flex items-center gap-2 ml-4">
-                    <span className="text-xs text-neutral-400 dark:text-neutral-500 opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
+                    <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
                       {totalPageviews > 0 ? `${Math.round((page.pageviews / totalPageviews) * 100)}%` : ''}
                     </span>
                     <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
diff --git a/components/dashboard/Locations.tsx b/components/dashboard/Locations.tsx
index 5a7e27b..ea6ed6a 100644
--- a/components/dashboard/Locations.tsx
+++ b/components/dashboard/Locations.tsx
@@ -271,7 +271,7 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
                         </span>
                       </div>
                       <div className="flex items-center gap-2 ml-4">
-                        <span className="text-xs text-neutral-400 dark:text-neutral-500 opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
+                        <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
                           {totalPageviews > 0 ? `${Math.round((item.pageviews / totalPageviews) * 100)}%` : ''}
                         </span>
                         <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
diff --git a/components/dashboard/TechSpecs.tsx b/components/dashboard/TechSpecs.tsx
index 5f9240e..422f1d7 100644
--- a/components/dashboard/TechSpecs.tsx
+++ b/components/dashboard/TechSpecs.tsx
@@ -175,7 +175,7 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
                       <span className="truncate">{item.name}</span>
                     </div>
                     <div className="flex items-center gap-2 ml-4">
-                      <span className="text-xs text-neutral-400 dark:text-neutral-500 opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
+                      <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
                         {totalPageviews > 0 ? `${Math.round((item.pageviews / totalPageviews) * 100)}%` : ''}
                       </span>
                       <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
diff --git a/components/dashboard/TopReferrers.tsx b/components/dashboard/TopReferrers.tsx
index fed4cd6..b1df086 100644
--- a/components/dashboard/TopReferrers.tsx
+++ b/components/dashboard/TopReferrers.tsx
@@ -116,7 +116,7 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
                     <span className="truncate" title={ref.referrer}>{getReferrerDisplayName(ref.referrer)}</span>
                   </div>
                   <div className="flex items-center gap-2 ml-4">
-                    <span className="text-xs text-neutral-400 dark:text-neutral-500 opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
+                    <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
                       {totalPageviews > 0 ? `${Math.round((ref.pageviews / totalPageviews) * 100)}%` : ''}
                     </span>
                     <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">

From 386b4a8c44c4f59c2dfb8f560aa19d1247a2ee6d Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 6 Mar 2026 22:53:00 +0100
Subject: [PATCH 14/28] feat: replace filter modal with chip-based dimension
 filter bar

Dimension chips (Page, Referrer, Country, Browser, OS, Device + More)
with popover dropdowns showing real values from current dashboard data
with counts. Operators inline, search/type custom values, click to apply.
---
 app/sites/[id]/page.tsx                    | 109 ++++++-
 components/dashboard/AddFilterDropdown.tsx | 322 +++++++++++++++------
 2 files changed, 334 insertions(+), 97 deletions(-)

diff --git a/app/sites/[id]/page.tsx b/app/sites/[id]/page.tsx
index 24a18e1..d5b7a94 100644
--- a/app/sites/[id]/page.tsx
+++ b/app/sites/[id]/page.tsx
@@ -22,7 +22,7 @@ import GoalStats from '@/components/dashboard/GoalStats'
 import ScrollDepth from '@/components/dashboard/ScrollDepth'
 import Campaigns from '@/components/dashboard/Campaigns'
 import FilterBar from '@/components/dashboard/FilterBar'
-import AddFilterDropdown from '@/components/dashboard/AddFilterDropdown'
+import AddFilterDropdown, { type FilterSuggestions } from '@/components/dashboard/AddFilterDropdown'
 import EventProperties from '@/components/dashboard/EventProperties'
 import { type DimensionFilter, serializeFilters, parseFiltersFromURL } from '@/lib/filters'
 import {
@@ -168,6 +168,109 @@ export default function SiteDashboardPage() {
   const realtime = realtimeData?.visitors ?? overview?.realtime_visitors ?? 0
   const dailyStats: DailyStat[] = overview?.daily_stats ?? []
 
+  // Build filter suggestions from current dashboard data
+  const filterSuggestions = useMemo<FilterSuggestions>(() => {
+    const s: FilterSuggestions = {}
+
+    // Pages
+    const topPages = pages?.top_pages ?? []
+    if (topPages.length > 0) {
+      s.page = topPages.map(p => ({ value: p.path, label: p.path, count: p.pageviews }))
+    }
+
+    // Referrers
+    const refs = referrers?.top_referrers ?? []
+    if (refs.length > 0) {
+      s.referrer = [
+        { value: '', label: 'Direct', count: undefined },
+        ...refs.filter(r => r.referrer && r.referrer !== '').map(r => ({
+          value: r.referrer,
+          label: r.referrer,
+          count: r.pageviews,
+        })),
+      ]
+    }
+
+    // Countries
+    const ctrs = locations?.countries ?? []
+    if (ctrs.length > 0) {
+      const regionNames = (() => { try { return new Intl.DisplayNames(['en'], { type: 'region' }) } catch { return null } })()
+      s.country = ctrs.filter(c => c.country && c.country !== 'Unknown').map(c => ({
+        value: c.country,
+        label: regionNames?.of(c.country) ?? c.country,
+        count: c.pageviews,
+      }))
+    }
+
+    // Regions
+    const regs = locations?.regions ?? []
+    if (regs.length > 0) {
+      s.region = regs.filter(r => r.region && r.region !== 'Unknown').map(r => ({
+        value: r.region,
+        label: r.region,
+        count: r.pageviews,
+      }))
+    }
+
+    // Cities
+    const cts = locations?.cities ?? []
+    if (cts.length > 0) {
+      s.city = cts.filter(c => c.city && c.city !== 'Unknown').map(c => ({
+        value: c.city,
+        label: c.city,
+        count: c.pageviews,
+      }))
+    }
+
+    // Browsers
+    const brs = devicesData?.browsers ?? []
+    if (brs.length > 0) {
+      s.browser = brs.filter(b => b.browser && b.browser !== 'Unknown').map(b => ({
+        value: b.browser,
+        label: b.browser,
+        count: b.pageviews,
+      }))
+    }
+
+    // OS
+    const oses = devicesData?.os ?? []
+    if (oses.length > 0) {
+      s.os = oses.filter(o => o.os && o.os !== 'Unknown').map(o => ({
+        value: o.os,
+        label: o.os,
+        count: o.pageviews,
+      }))
+    }
+
+    // Devices
+    const devs = devicesData?.devices ?? []
+    if (devs.length > 0) {
+      s.device = devs.filter(d => d.device && d.device !== 'Unknown').map(d => ({
+        value: d.device,
+        label: d.device,
+        count: d.pageviews,
+      }))
+    }
+
+    // UTM from campaigns
+    const camps = campaigns ?? []
+    if (camps.length > 0) {
+      const sources = new Map<string, number>()
+      const mediums = new Map<string, number>()
+      const campNames = new Map<string, number>()
+      camps.forEach(c => {
+        if (c.source) sources.set(c.source, (sources.get(c.source) ?? 0) + c.pageviews)
+        if (c.medium) mediums.set(c.medium, (mediums.get(c.medium) ?? 0) + c.pageviews)
+        if (c.campaign) campNames.set(c.campaign, (campNames.get(c.campaign) ?? 0) + c.pageviews)
+      })
+      if (sources.size > 0) s.utm_source = [...sources.entries()].map(([v, c]) => ({ value: v, label: v, count: c }))
+      if (mediums.size > 0) s.utm_medium = [...mediums.entries()].map(([v, c]) => ({ value: v, label: v, count: c }))
+      if (campNames.size > 0) s.utm_campaign = [...campNames.entries()].map(([v, c]) => ({ value: v, label: v, count: c }))
+    }
+
+    return s
+  }, [pages, referrers, locations, devicesData, campaigns])
+
   // Show error toast on fetch failure
   useEffect(() => {
     if (overviewError) {
@@ -357,9 +460,9 @@ export default function SiteDashboardPage() {
       </div>
 
       {/* Dimension Filters */}
-      <div className="flex items-center gap-2 flex-wrap mb-2">
+      <div className="space-y-2 mb-2">
+        <AddFilterDropdown onAdd={handleAddFilter} suggestions={filterSuggestions} />
         <FilterBar filters={filters} onRemove={handleRemoveFilter} onClear={handleClearFilters} />
-        <AddFilterDropdown onAdd={handleAddFilter} />
       </div>
 
       {/* Advanced Chart with Integrated Stats */}
diff --git a/components/dashboard/AddFilterDropdown.tsx b/components/dashboard/AddFilterDropdown.tsx
index ee795ab..6599be3 100644
--- a/components/dashboard/AddFilterDropdown.tsx
+++ b/components/dashboard/AddFilterDropdown.tsx
@@ -1,119 +1,253 @@
 'use client'
 
-import { useState } from 'react'
-import { Modal } from '@ciphera-net/ui'
-import { DIMENSIONS, DIMENSION_LABELS, OPERATORS, OPERATOR_LABELS, type DimensionFilter } from '@/lib/filters'
+import { useState, useRef, useEffect } from 'react'
+import { DIMENSION_LABELS, OPERATORS, OPERATOR_LABELS, type DimensionFilter } from '@/lib/filters'
+
+export interface FilterSuggestion {
+  value: string
+  label: string
+  count?: number
+}
+
+export interface FilterSuggestions {
+  [dimension: string]: FilterSuggestion[]
+}
 
 interface AddFilterDropdownProps {
   onAdd: (filter: DimensionFilter) => void
+  suggestions?: FilterSuggestions
 }
 
-export default function AddFilterDropdown({ onAdd }: AddFilterDropdownProps) {
-  const [isOpen, setIsOpen] = useState(false)
-  const [dimension, setDimension] = useState('')
+// Which dimensions show as always-visible chips vs hidden in "More"
+const PRIMARY_DIMS = ['page', 'referrer', 'country', 'browser', 'os', 'device']
+const SECONDARY_DIMS = ['region', 'city', 'utm_source', 'utm_medium', 'utm_campaign']
+
+function DimensionPopover({
+  dimension,
+  suggestions,
+  onApply,
+  onClose,
+}: {
+  dimension: string
+  suggestions: FilterSuggestion[]
+  onApply: (filter: DimensionFilter) => void
+  onClose: () => void
+}) {
   const [operator, setOperator] = useState<DimensionFilter['operator']>('is')
-  const [value, setValue] = useState('')
+  const [search, setSearch] = useState('')
+  const ref = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
 
-  function resetState() {
-    setDimension('')
-    setOperator('is')
-    setValue('')
+  useEffect(() => {
+    inputRef.current?.focus()
+  }, [])
+
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        onClose()
+      }
+    }
+    function handleEsc(e: KeyboardEvent) {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('mousedown', handleClick)
+    document.addEventListener('keydown', handleEsc)
+    return () => {
+      document.removeEventListener('mousedown', handleClick)
+      document.removeEventListener('keydown', handleEsc)
+    }
+  }, [onClose])
+
+  const filtered = suggestions.filter(s =>
+    s.label.toLowerCase().includes(search.toLowerCase()) ||
+    s.value.toLowerCase().includes(search.toLowerCase())
+  )
+
+  function handleSelectValue(value: string) {
+    onApply({ dimension, operator, values: [value] })
+    onClose()
   }
 
-  function handleOpen() {
-    resetState()
-    setIsOpen(true)
+  function handleSubmitCustom() {
+    if (!search.trim()) return
+    onApply({ dimension, operator, values: [search.trim()] })
+    onClose()
   }
 
-  function handleSubmit() {
-    if (!dimension || !operator || !value.trim()) return
-    onAdd({ dimension, operator, values: [value.trim()] })
-    setIsOpen(false)
-    resetState()
-  }
-
-  const hasDimension = dimension !== ''
-
   return (
-    <>
-      <button
-        onClick={handleOpen}
-        className="inline-flex items-center gap-2 px-3 py-1.5 text-xs font-medium rounded-lg bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700 hover:text-neutral-900 dark:hover:text-white transition-colors cursor-pointer"
-      >
-        <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-          <path strokeLinecap="round" strokeLinejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
-        </svg>
-        Filter
-      </button>
+    <div
+      ref={ref}
+      className="absolute top-full left-0 mt-1.5 z-50 w-72 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden"
+    >
+      {/* Operator pills */}
+      <div className="flex gap-1 px-3 pt-3 pb-2 flex-wrap">
+        {OPERATORS.map(op => (
+          <button
+            key={op}
+            onClick={() => setOperator(op)}
+            className={`px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors cursor-pointer ${
+              operator === op
+                ? 'bg-brand-orange text-white'
+                : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
+            }`}
+          >
+            {OPERATOR_LABELS[op]}
+          </button>
+        ))}
+      </div>
 
-      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title="Add Filter">
-        {!hasDimension ? (
-          <div className="grid grid-cols-2 gap-2">
-            {DIMENSIONS.map(dim => (
+      {/* Search input */}
+      <div className="px-3 pb-2">
+        <input
+          ref={inputRef}
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+          onKeyDown={e => {
+            if (e.key === 'Enter') {
+              if (filtered.length === 1) {
+                handleSelectValue(filtered[0].value)
+              } else {
+                handleSubmitCustom()
+              }
+            }
+          }}
+          placeholder={`Search or type ${DIMENSION_LABELS[dimension]?.toLowerCase()}...`}
+          className="w-full px-3 py-2 text-sm bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg text-neutral-900 dark:text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-brand-orange/40 focus:border-brand-orange transition-colors"
+        />
+      </div>
+
+      {/* Suggestions list */}
+      {filtered.length > 0 && (
+        <div className="max-h-52 overflow-y-auto border-t border-neutral-100 dark:border-neutral-800">
+          {filtered.map(s => (
+            <button
+              key={s.value}
+              onClick={() => handleSelectValue(s.value)}
+              className="w-full flex items-center justify-between px-3 py-2 text-sm text-left hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors cursor-pointer"
+            >
+              <span className="truncate text-neutral-900 dark:text-white">{s.label}</span>
+              {s.count !== undefined && (
+                <span className="text-xs text-neutral-400 dark:text-neutral-500 ml-2 tabular-nums flex-shrink-0">
+                  {s.count.toLocaleString()}
+                </span>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Custom value apply when no matches */}
+      {search.trim() && filtered.length === 0 && (
+        <div className="px-3 py-3 border-t border-neutral-100 dark:border-neutral-800">
+          <button
+            onClick={handleSubmitCustom}
+            className="w-full px-3 py-2 text-sm font-medium bg-brand-orange text-white rounded-lg hover:bg-brand-orange/90 transition-colors cursor-pointer"
+          >
+            Filter by &ldquo;{search.trim()}&rdquo;
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default function AddFilterDropdown({ onAdd, suggestions = {} }: AddFilterDropdownProps) {
+  const [openDim, setOpenDim] = useState<string | null>(null)
+  const [showMore, setShowMore] = useState(false)
+  const moreRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!showMore) return
+    function handleClick(e: MouseEvent) {
+      if (moreRef.current && !moreRef.current.contains(e.target as Node)) {
+        setShowMore(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClick)
+    return () => document.removeEventListener('mousedown', handleClick)
+  }, [showMore])
+
+  function renderChip(dim: string) {
+    const isOpen = openDim === dim
+    return (
+      <div key={dim} className="relative">
+        <button
+          onClick={() => {
+            setOpenDim(isOpen ? null : dim)
+            setShowMore(false)
+          }}
+          className={`inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg transition-all cursor-pointer ${
+            isOpen
+              ? 'bg-brand-orange/10 text-brand-orange border border-brand-orange/30'
+              : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700 hover:text-neutral-900 dark:hover:text-white border border-transparent'
+          }`}
+        >
+          {DIMENSION_LABELS[dim]}
+          <svg className={`w-3 h-3 transition-transform ${isOpen ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+        {isOpen && (
+          <DimensionPopover
+            dimension={dim}
+            suggestions={suggestions[dim] || []}
+            onApply={onAdd}
+            onClose={() => setOpenDim(null)}
+          />
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex items-center gap-1.5 flex-wrap">
+      {PRIMARY_DIMS.map(renderChip)}
+
+      {/* More dropdown for secondary dimensions */}
+      <div className="relative" ref={moreRef}>
+        <button
+          onClick={() => {
+            setShowMore(!showMore)
+            setOpenDim(null)
+          }}
+          className={`inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg transition-all cursor-pointer ${
+            showMore || SECONDARY_DIMS.includes(openDim || '')
+              ? 'bg-brand-orange/10 text-brand-orange border border-brand-orange/30'
+              : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700 hover:text-neutral-900 dark:hover:text-white border border-transparent'
+          }`}
+        >
+          More
+          <svg className={`w-3 h-3 transition-transform ${showMore ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+        {showMore && (
+          <div className="absolute top-full left-0 mt-1.5 z-50 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden py-1 min-w-[160px]">
+            {SECONDARY_DIMS.map(dim => (
               <button
                 key={dim}
-                onClick={() => setDimension(dim)}
-                className="text-left px-4 py-3 text-sm font-medium rounded-xl border border-neutral-200 dark:border-neutral-700 text-neutral-700 dark:text-neutral-300 hover:border-brand-orange hover:text-brand-orange dark:hover:border-brand-orange dark:hover:text-brand-orange transition-colors cursor-pointer"
+                onClick={() => {
+                  setShowMore(false)
+                  setOpenDim(dim)
+                }}
+                className="w-full text-left px-4 py-2 text-sm text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors cursor-pointer"
               >
                 {DIMENSION_LABELS[dim]}
               </button>
             ))}
           </div>
-        ) : (
-          <div className="space-y-5">
-            {/* Selected dimension header */}
-            <div className="flex items-center gap-2">
-              <button
-                onClick={() => { setDimension(''); setOperator('is'); setValue('') }}
-                className="text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors cursor-pointer"
-              >
-                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
-                </svg>
-              </button>
-              <span className="text-sm font-semibold text-neutral-900 dark:text-white">
-                {DIMENSION_LABELS[dimension]}
-              </span>
-            </div>
-
-            {/* Operator selection */}
-            <div className="flex gap-2 flex-wrap">
-              {OPERATORS.map(op => (
-                <button
-                  key={op}
-                  onClick={() => setOperator(op)}
-                  className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors cursor-pointer ${
-                    operator === op
-                      ? 'bg-brand-orange text-white'
-                      : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
-                  }`}
-                >
-                  {OPERATOR_LABELS[op]}
-                </button>
-              ))}
-            </div>
-
-            {/* Value input */}
-            <input
-              autoFocus
-              value={value}
-              onChange={e => setValue(e.target.value)}
-              onKeyDown={e => { if (e.key === 'Enter') handleSubmit() }}
-              placeholder={`Enter ${DIMENSION_LABELS[dimension].toLowerCase()} value...`}
-              className="w-full px-4 py-3 text-sm bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl text-neutral-900 dark:text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-brand-orange/40 focus:border-brand-orange transition-colors"
-            />
-
-            {/* Apply */}
-            <button
-              onClick={handleSubmit}
-              disabled={!value.trim()}
-              className="w-full px-4 py-3 text-sm font-semibold bg-brand-orange text-white rounded-xl hover:bg-brand-orange/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors cursor-pointer"
-            >
-              Apply Filter
-            </button>
-          </div>
         )}
-      </Modal>
-    </>
+        {/* Render popover for secondary dims inline here */}
+        {openDim && SECONDARY_DIMS.includes(openDim) && (
+          <DimensionPopover
+            dimension={openDim}
+            suggestions={suggestions[openDim] || []}
+            onApply={onAdd}
+            onClose={() => setOpenDim(null)}
+          />
+        )}
+      </div>
+    </div>
   )
 }

From 7be30b57b5b6fef4aea8edfe3e8417f1e9b2fcb3 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 6 Mar 2026 23:02:35 +0100
Subject: [PATCH 15/28] refactor: condense filter chips into single button with
 dropdown
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the 7-chip row with a single "+ Filter" button that opens a
compact popover: dimension list → operator + search + values. Much
cleaner default state, same functionality.
---
 app/sites/[id]/page.tsx                    |   2 +-
 components/dashboard/AddFilterDropdown.tsx | 354 +++++++++------------
 2 files changed, 155 insertions(+), 201 deletions(-)

diff --git a/app/sites/[id]/page.tsx b/app/sites/[id]/page.tsx
index d5b7a94..f9b0fb3 100644
--- a/app/sites/[id]/page.tsx
+++ b/app/sites/[id]/page.tsx
@@ -460,7 +460,7 @@ export default function SiteDashboardPage() {
       </div>
 
       {/* Dimension Filters */}
-      <div className="space-y-2 mb-2">
+      <div className="flex items-center gap-2 flex-wrap mb-2">
         <AddFilterDropdown onAdd={handleAddFilter} suggestions={filterSuggestions} />
         <FilterBar filters={filters} onRemove={handleRemoveFilter} onClear={handleClearFilters} />
       </div>
diff --git a/components/dashboard/AddFilterDropdown.tsx b/components/dashboard/AddFilterDropdown.tsx
index 6599be3..e0068ce 100644
--- a/components/dashboard/AddFilterDropdown.tsx
+++ b/components/dashboard/AddFilterDropdown.tsx
@@ -18,38 +18,26 @@ interface AddFilterDropdownProps {
   suggestions?: FilterSuggestions
 }
 
-// Which dimensions show as always-visible chips vs hidden in "More"
-const PRIMARY_DIMS = ['page', 'referrer', 'country', 'browser', 'os', 'device']
-const SECONDARY_DIMS = ['region', 'city', 'utm_source', 'utm_medium', 'utm_campaign']
+const ALL_DIMS = ['page', 'referrer', 'country', 'region', 'city', 'browser', 'os', 'device', 'utm_source', 'utm_medium', 'utm_campaign']
 
-function DimensionPopover({
-  dimension,
-  suggestions,
-  onApply,
-  onClose,
-}: {
-  dimension: string
-  suggestions: FilterSuggestion[]
-  onApply: (filter: DimensionFilter) => void
-  onClose: () => void
-}) {
+export default function AddFilterDropdown({ onAdd, suggestions = {} }: AddFilterDropdownProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [selectedDim, setSelectedDim] = useState<string | null>(null)
   const [operator, setOperator] = useState<DimensionFilter['operator']>('is')
   const [search, setSearch] = useState('')
   const ref = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
 
+  // Close on outside click or Escape
   useEffect(() => {
-    inputRef.current?.focus()
-  }, [])
-
-  useEffect(() => {
+    if (!isOpen) return
     function handleClick(e: MouseEvent) {
       if (ref.current && !ref.current.contains(e.target as Node)) {
-        onClose()
+        handleClose()
       }
     }
     function handleEsc(e: KeyboardEvent) {
-      if (e.key === 'Escape') onClose()
+      if (e.key === 'Escape') handleClose()
     }
     document.addEventListener('mousedown', handleClick)
     document.addEventListener('keydown', handleEsc)
@@ -57,197 +45,163 @@ function DimensionPopover({
       document.removeEventListener('mousedown', handleClick)
       document.removeEventListener('keydown', handleEsc)
     }
-  }, [onClose])
+  }, [isOpen])
 
-  const filtered = suggestions.filter(s =>
+  // Focus search input when a dimension is selected
+  useEffect(() => {
+    if (selectedDim) inputRef.current?.focus()
+  }, [selectedDim])
+
+  function handleClose() {
+    setIsOpen(false)
+    setSelectedDim(null)
+    setOperator('is')
+    setSearch('')
+  }
+
+  function handleSelectValue(value: string) {
+    onAdd({ dimension: selectedDim!, operator, values: [value] })
+    handleClose()
+  }
+
+  function handleSubmitCustom() {
+    if (!search.trim() || !selectedDim) return
+    onAdd({ dimension: selectedDim, operator, values: [search.trim()] })
+    handleClose()
+  }
+
+  const dimSuggestions = selectedDim ? (suggestions[selectedDim] || []) : []
+  const filtered = dimSuggestions.filter(s =>
     s.label.toLowerCase().includes(search.toLowerCase()) ||
     s.value.toLowerCase().includes(search.toLowerCase())
   )
 
-  function handleSelectValue(value: string) {
-    onApply({ dimension, operator, values: [value] })
-    onClose()
-  }
-
-  function handleSubmitCustom() {
-    if (!search.trim()) return
-    onApply({ dimension, operator, values: [search.trim()] })
-    onClose()
-  }
-
   return (
-    <div
-      ref={ref}
-      className="absolute top-full left-0 mt-1.5 z-50 w-72 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden"
-    >
-      {/* Operator pills */}
-      <div className="flex gap-1 px-3 pt-3 pb-2 flex-wrap">
-        {OPERATORS.map(op => (
-          <button
-            key={op}
-            onClick={() => setOperator(op)}
-            className={`px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors cursor-pointer ${
-              operator === op
-                ? 'bg-brand-orange text-white'
-                : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
-            }`}
-          >
-            {OPERATOR_LABELS[op]}
-          </button>
-        ))}
-      </div>
+    <div className="relative" ref={ref}>
+      <button
+        onClick={() => {
+          if (isOpen) { handleClose() } else { setIsOpen(true) }
+        }}
+        className={`inline-flex items-center gap-2 px-3 py-1.5 text-xs font-medium rounded-lg transition-all cursor-pointer ${
+          isOpen
+            ? 'bg-brand-orange/10 text-brand-orange border border-brand-orange/30'
+            : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700 hover:text-neutral-900 dark:hover:text-white border border-transparent'
+        }`}
+      >
+        <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
+        </svg>
+        Filter
+      </button>
 
-      {/* Search input */}
-      <div className="px-3 pb-2">
-        <input
-          ref={inputRef}
-          value={search}
-          onChange={e => setSearch(e.target.value)}
-          onKeyDown={e => {
-            if (e.key === 'Enter') {
-              if (filtered.length === 1) {
-                handleSelectValue(filtered[0].value)
-              } else {
-                handleSubmitCustom()
-              }
-            }
-          }}
-          placeholder={`Search or type ${DIMENSION_LABELS[dimension]?.toLowerCase()}...`}
-          className="w-full px-3 py-2 text-sm bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg text-neutral-900 dark:text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-brand-orange/40 focus:border-brand-orange transition-colors"
-        />
-      </div>
-
-      {/* Suggestions list */}
-      {filtered.length > 0 && (
-        <div className="max-h-52 overflow-y-auto border-t border-neutral-100 dark:border-neutral-800">
-          {filtered.map(s => (
-            <button
-              key={s.value}
-              onClick={() => handleSelectValue(s.value)}
-              className="w-full flex items-center justify-between px-3 py-2 text-sm text-left hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors cursor-pointer"
-            >
-              <span className="truncate text-neutral-900 dark:text-white">{s.label}</span>
-              {s.count !== undefined && (
-                <span className="text-xs text-neutral-400 dark:text-neutral-500 ml-2 tabular-nums flex-shrink-0">
-                  {s.count.toLocaleString()}
+      {isOpen && (
+        <div className="absolute top-full left-0 mt-1.5 z-50 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden min-w-[280px]">
+          {!selectedDim ? (
+            /* Step 1: Dimension list */
+            <div className="py-1">
+              {ALL_DIMS.map(dim => (
+                <button
+                  key={dim}
+                  onClick={() => setSelectedDim(dim)}
+                  className="w-full flex items-center justify-between px-4 py-2.5 text-sm text-left hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors cursor-pointer"
+                >
+                  <span className="text-neutral-900 dark:text-white font-medium">{DIMENSION_LABELS[dim]}</span>
+                  <svg className="w-3.5 h-3.5 text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+                  </svg>
+                </button>
+              ))}
+            </div>
+          ) : (
+            /* Step 2: Operator + search + values */
+            <>
+              {/* Header with back button */}
+              <div className="flex items-center gap-2 px-3 pt-3 pb-2">
+                <button
+                  onClick={() => { setSelectedDim(null); setSearch(''); setOperator('is') }}
+                  className="p-1 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors cursor-pointer rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-800"
+                >
+                  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+                  </svg>
+                </button>
+                <span className="text-sm font-semibold text-neutral-900 dark:text-white">
+                  {DIMENSION_LABELS[selectedDim]}
                 </span>
+              </div>
+
+              {/* Operator pills */}
+              <div className="flex gap-1 px-3 pb-2 flex-wrap">
+                {OPERATORS.map(op => (
+                  <button
+                    key={op}
+                    onClick={() => setOperator(op)}
+                    className={`px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors cursor-pointer ${
+                      operator === op
+                        ? 'bg-brand-orange text-white'
+                        : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
+                    }`}
+                  >
+                    {OPERATOR_LABELS[op]}
+                  </button>
+                ))}
+              </div>
+
+              {/* Search input */}
+              <div className="px-3 pb-2">
+                <input
+                  ref={inputRef}
+                  value={search}
+                  onChange={e => setSearch(e.target.value)}
+                  onKeyDown={e => {
+                    if (e.key === 'Enter') {
+                      if (filtered.length === 1) {
+                        handleSelectValue(filtered[0].value)
+                      } else {
+                        handleSubmitCustom()
+                      }
+                    }
+                  }}
+                  placeholder={`Search ${DIMENSION_LABELS[selectedDim]?.toLowerCase()}...`}
+                  className="w-full px-3 py-2 text-sm bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg text-neutral-900 dark:text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-brand-orange/40 focus:border-brand-orange transition-colors"
+                />
+              </div>
+
+              {/* Values list */}
+              {filtered.length > 0 && (
+                <div className="max-h-52 overflow-y-auto border-t border-neutral-100 dark:border-neutral-800">
+                  {filtered.map(s => (
+                    <button
+                      key={s.value}
+                      onClick={() => handleSelectValue(s.value)}
+                      className="w-full flex items-center justify-between px-4 py-2 text-sm text-left hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors cursor-pointer"
+                    >
+                      <span className="truncate text-neutral-900 dark:text-white">{s.label}</span>
+                      {s.count !== undefined && (
+                        <span className="text-xs text-neutral-400 dark:text-neutral-500 ml-2 tabular-nums flex-shrink-0">
+                          {s.count.toLocaleString()}
+                        </span>
+                      )}
+                    </button>
+                  ))}
+                </div>
               )}
-            </button>
-          ))}
-        </div>
-      )}
 
-      {/* Custom value apply when no matches */}
-      {search.trim() && filtered.length === 0 && (
-        <div className="px-3 py-3 border-t border-neutral-100 dark:border-neutral-800">
-          <button
-            onClick={handleSubmitCustom}
-            className="w-full px-3 py-2 text-sm font-medium bg-brand-orange text-white rounded-lg hover:bg-brand-orange/90 transition-colors cursor-pointer"
-          >
-            Filter by &ldquo;{search.trim()}&rdquo;
-          </button>
+              {/* Custom value apply */}
+              {search.trim() && filtered.length === 0 && (
+                <div className="px-3 py-3 border-t border-neutral-100 dark:border-neutral-800">
+                  <button
+                    onClick={handleSubmitCustom}
+                    className="w-full px-3 py-2 text-sm font-medium bg-brand-orange text-white rounded-lg hover:bg-brand-orange/90 transition-colors cursor-pointer"
+                  >
+                    Filter by &ldquo;{search.trim()}&rdquo;
+                  </button>
+                </div>
+              )}
+            </>
+          )}
         </div>
       )}
     </div>
   )
-}
-
-export default function AddFilterDropdown({ onAdd, suggestions = {} }: AddFilterDropdownProps) {
-  const [openDim, setOpenDim] = useState<string | null>(null)
-  const [showMore, setShowMore] = useState(false)
-  const moreRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (!showMore) return
-    function handleClick(e: MouseEvent) {
-      if (moreRef.current && !moreRef.current.contains(e.target as Node)) {
-        setShowMore(false)
-      }
-    }
-    document.addEventListener('mousedown', handleClick)
-    return () => document.removeEventListener('mousedown', handleClick)
-  }, [showMore])
-
-  function renderChip(dim: string) {
-    const isOpen = openDim === dim
-    return (
-      <div key={dim} className="relative">
-        <button
-          onClick={() => {
-            setOpenDim(isOpen ? null : dim)
-            setShowMore(false)
-          }}
-          className={`inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg transition-all cursor-pointer ${
-            isOpen
-              ? 'bg-brand-orange/10 text-brand-orange border border-brand-orange/30'
-              : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700 hover:text-neutral-900 dark:hover:text-white border border-transparent'
-          }`}
-        >
-          {DIMENSION_LABELS[dim]}
-          <svg className={`w-3 h-3 transition-transform ${isOpen ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-            <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-          </svg>
-        </button>
-        {isOpen && (
-          <DimensionPopover
-            dimension={dim}
-            suggestions={suggestions[dim] || []}
-            onApply={onAdd}
-            onClose={() => setOpenDim(null)}
-          />
-        )}
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex items-center gap-1.5 flex-wrap">
-      {PRIMARY_DIMS.map(renderChip)}
-
-      {/* More dropdown for secondary dimensions */}
-      <div className="relative" ref={moreRef}>
-        <button
-          onClick={() => {
-            setShowMore(!showMore)
-            setOpenDim(null)
-          }}
-          className={`inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg transition-all cursor-pointer ${
-            showMore || SECONDARY_DIMS.includes(openDim || '')
-              ? 'bg-brand-orange/10 text-brand-orange border border-brand-orange/30'
-              : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700 hover:text-neutral-900 dark:hover:text-white border border-transparent'
-          }`}
-        >
-          More
-          <svg className={`w-3 h-3 transition-transform ${showMore ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-            <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-          </svg>
-        </button>
-        {showMore && (
-          <div className="absolute top-full left-0 mt-1.5 z-50 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden py-1 min-w-[160px]">
-            {SECONDARY_DIMS.map(dim => (
-              <button
-                key={dim}
-                onClick={() => {
-                  setShowMore(false)
-                  setOpenDim(dim)
-                }}
-                className="w-full text-left px-4 py-2 text-sm text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors cursor-pointer"
-              >
-                {DIMENSION_LABELS[dim]}
-              </button>
-            ))}
-          </div>
-        )}
-        {/* Render popover for secondary dims inline here */}
-        {openDim && SECONDARY_DIMS.includes(openDim) && (
-          <DimensionPopover
-            dimension={openDim}
-            suggestions={suggestions[openDim] || []}
-            onApply={onAdd}
-            onClose={() => setOpenDim(null)}
-          />
-        )}
-      </div>
-    </div>
-  )
-}
+}
\ No newline at end of file

From b046978256f29a1b1aa6f8bf6357218b5c903698 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 6 Mar 2026 23:11:36 +0100
Subject: [PATCH 16/28] =?UTF-8?q?style:=20unify=20filter=20bar=20design=20?=
 =?UTF-8?q?=E2=80=94=20kill=20FILTERS=20label,=20solid=20orange=20pills?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove redundant "FILTERS" uppercase label
- Change pills from washed-out orange/10 border to solid brand-orange
  with white text for strong contrast in both light and dark mode
- Pills now use rounded-lg to match the Filter button shape
- FilterBar renders fragments (no wrapper div) so everything flows
  naturally in the parent flex row
---
 components/dashboard/FilterBar.tsx | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/components/dashboard/FilterBar.tsx b/components/dashboard/FilterBar.tsx
index fd8a1b5..80b4aad 100644
--- a/components/dashboard/FilterBar.tsx
+++ b/components/dashboard/FilterBar.tsx
@@ -12,19 +12,16 @@ export default function FilterBar({ filters, onRemove, onClear }: FilterBarProps
   if (filters.length === 0) return null
 
   return (
-    <div className="flex flex-wrap items-center gap-2 mb-4">
-      <span className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">
-        Filters
-      </span>
+    <>
       {filters.map((f, i) => (
         <button
           key={`${f.dimension}-${f.operator}-${f.values.join(',')}`}
           onClick={() => onRemove(i)}
-          className="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-full bg-brand-orange/10 text-brand-orange border border-brand-orange/20 hover:bg-brand-orange/20 transition-colors cursor-pointer group"
+          className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg bg-brand-orange text-white hover:bg-brand-orange/80 transition-colors cursor-pointer group"
           title={`Remove filter: ${filterLabel(f)}`}
         >
           <span>{filterLabel(f)}</span>
-          <svg className="w-3 h-3 opacity-60 group-hover:opacity-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <svg className="w-3 h-3 opacity-70 group-hover:opacity-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
             <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
           </svg>
         </button>
@@ -32,11 +29,11 @@ export default function FilterBar({ filters, onRemove, onClear }: FilterBarProps
       {filters.length > 1 && (
         <button
           onClick={onClear}
-          className="text-xs text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 transition-colors cursor-pointer"
+          className="px-2 py-1.5 text-xs font-medium text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors cursor-pointer"
         >
           Clear all
         </button>
       )}
-    </div>
+    </>
   )
 }

From 2c82c1a52abc76819e46b67b5021632d0385c089 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 6 Mar 2026 23:27:54 +0100
Subject: [PATCH 17/28] fix: load full filter suggestions (up to 100) and fix
 Direct referrer duplicate

Filter dropdowns previously only showed ~10 values from cached dashboard
data. Now lazy-loads up to 100 values per dimension when the dropdown
opens. Also removes duplicate "Direct" entry from referrer suggestions.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md                               |  17 ++--
 app/sites/[id]/page.tsx                    | 104 +++++++++++++++++----
 components/dashboard/AddFilterDropdown.tsx |  53 ++++++++---
 lib/filters.ts                             |   4 +-
 4 files changed, 138 insertions(+), 40 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1b98cb8..2f38e55 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,15 +10,20 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ### Added
 
-- **Hover percentages on dashboard panels.** When you hover over any item in the Content, Locations, Technology, or Top Referrers panels, a percentage now smoothly slides in next to the count — showing you at a glance how much of total traffic that item represents.
-- **Click any item to filter your dashboard.** Clicking a referrer, browser, country, city, page, OS, or device in any dashboard panel now instantly filters your entire dashboard to show only that traffic. No need to open the filter modal — just click the item you're curious about.
-- **Redesigned filter button.** The old dashed "Add filter" dropdown has been replaced with a clean modal. Pick a dimension from a visual grid, choose an operator, enter a value, and apply — all in a focused overlay.
+- **Hover percentages on dashboard panels.** Hover over any item in Content, Locations, Technology, or Top Referrers to see what percentage of total traffic it represents. The percentage slides in smoothly next to the count.
+- **Click any item to filter your dashboard.** Click a referrer, browser, country, page, or any other item in your dashboard panels to instantly filter the entire dashboard to just that traffic.
+- **New filter experience.** A single compact "Filter" button replaces the old filter UI. Click it to browse all available dimensions, see real values from your data with visitor counts, search or type a custom value, and apply — all in a quick dropdown without leaving the page.
+
+### Improved
+
+- **Stronger filter pills.** Active filters now use solid brand-colored pills that are easy to spot in both light and dark mode. Click any pill to remove it.
 
 ### Fixed
 
-- **Clicking the same item no longer creates duplicate filters.** Previously, clicking the same referrer or browser multiple times would stack identical filter pills. Now the dashboard recognizes you already have that filter active and ignores the duplicate.
-- **"Direct" traffic can now be filtered.** Typing "Direct" as a referrer filter value now correctly matches visitors who arrived without a referrer. Previously this showed zero results because the system didn't recognize "Direct" as a special value.
-- **Campaigns now respect active filters.** The Campaigns panel previously ignored your active filters — so if you filtered by a specific referrer or country, campaigns still showed all data. Campaigns now filter along with the rest of your dashboard.
+- **Duplicate filters no longer stack.** Clicking the same item twice no longer adds the same filter again.
+- **Campaigns now respect your active filters.** Previously, the Campaigns panel ignored dashboard filters and always showed all campaigns. Now it filters along with everything else.
+- **Duplicate "Direct" entry removed from the referrer filter list.** The referrer suggestions no longer show "Direct" twice.
+- **Filter dropdowns now show all your data.** Previously, the filter value list only showed up to 10 items — so if you had 50 cities or 30 browsers, most were missing. Now up to 100 values are loaded when you open a filter, with a loading spinner while they're fetched.
 
 ## [0.13.0-alpha] - 2026-03-02
 
diff --git a/app/sites/[id]/page.tsx b/app/sites/[id]/page.tsx
index f9b0fb3..c115c85 100644
--- a/app/sites/[id]/page.tsx
+++ b/app/sites/[id]/page.tsx
@@ -5,7 +5,20 @@ import { logger } from '@/lib/utils/logger'
 import { useCallback, useEffect, useState, useMemo } from 'react'
 import { useParams, useRouter, useSearchParams } from 'next/navigation'
 import { motion } from 'framer-motion'
-import { getPerformanceByPage, type Stats, type DailyStat } from '@/lib/api/stats'
+import {
+  getPerformanceByPage,
+  getTopPages,
+  getTopReferrers,
+  getCountries,
+  getCities,
+  getRegions,
+  getBrowsers,
+  getOS,
+  getDevices,
+  getCampaigns,
+  type Stats,
+  type DailyStat,
+} from '@/lib/api/stats'
 import { getDateRange } from '@ciphera-net/ui'
 import { toast } from '@ciphera-net/ui'
 import { Button } from '@ciphera-net/ui'
@@ -22,7 +35,7 @@ import GoalStats from '@/components/dashboard/GoalStats'
 import ScrollDepth from '@/components/dashboard/ScrollDepth'
 import Campaigns from '@/components/dashboard/Campaigns'
 import FilterBar from '@/components/dashboard/FilterBar'
-import AddFilterDropdown, { type FilterSuggestions } from '@/components/dashboard/AddFilterDropdown'
+import AddFilterDropdown, { type FilterSuggestion, type FilterSuggestions } from '@/components/dashboard/AddFilterDropdown'
 import EventProperties from '@/components/dashboard/EventProperties'
 import { type DimensionFilter, serializeFilters, parseFiltersFromURL } from '@/lib/filters'
 import {
@@ -98,17 +111,12 @@ export default function SiteDashboardPage() {
   const [selectedEvent, setSelectedEvent] = useState<string | null>(null)
 
   const handleAddFilter = useCallback((filter: DimensionFilter) => {
-    // Normalize "Direct" referrer to empty string (direct traffic has no referrer in DB)
-    const normalized = { ...filter }
-    if (normalized.dimension === 'referrer') {
-      normalized.values = normalized.values.map(v => v.toLowerCase() === 'direct' ? '' : v)
-    }
     setFilters(prev => {
       const isDuplicate = prev.some(
-        f => f.dimension === normalized.dimension && f.operator === normalized.operator && f.values.join(';') === normalized.values.join(';')
+        f => f.dimension === filter.dimension && f.operator === filter.operator && f.values.join(';') === filter.values.join(';')
       )
       if (isDuplicate) return prev
-      return [...prev, normalized]
+      return [...prev, filter]
     })
   }, [])
 
@@ -120,6 +128,69 @@ export default function SiteDashboardPage() {
     setFilters([])
   }, [])
 
+  // Fetch full suggestion list (up to 100) when a dimension is selected in the filter dropdown
+  const handleFetchSuggestions = useCallback(async (dimension: string): Promise<FilterSuggestion[]> => {
+    const start = dateRange.start
+    const end = dateRange.end
+    const f = filtersParam || undefined
+    const limit = 100
+
+    try {
+      const regionNames = (() => { try { return new Intl.DisplayNames(['en'], { type: 'region' }) } catch { return null } })()
+
+      switch (dimension) {
+        case 'page': {
+          const data = await getTopPages(siteId, start, end, limit, f)
+          return data.map(p => ({ value: p.path, label: p.path, count: p.pageviews }))
+        }
+        case 'referrer': {
+          const data = await getTopReferrers(siteId, start, end, limit, f)
+          return data.filter(r => r.referrer && r.referrer !== '').map(r => ({ value: r.referrer, label: r.referrer, count: r.pageviews }))
+        }
+        case 'country': {
+          const data = await getCountries(siteId, start, end, limit, f)
+          return data.filter(c => c.country && c.country !== 'Unknown').map(c => ({ value: c.country, label: regionNames?.of(c.country) ?? c.country, count: c.pageviews }))
+        }
+        case 'city': {
+          const data = await getCities(siteId, start, end, limit, f)
+          return data.filter(c => c.city && c.city !== 'Unknown').map(c => ({ value: c.city, label: c.city, count: c.pageviews }))
+        }
+        case 'region': {
+          const data = await getRegions(siteId, start, end, limit, f)
+          return data.filter(r => r.region && r.region !== 'Unknown').map(r => ({ value: r.region, label: r.region, count: r.pageviews }))
+        }
+        case 'browser': {
+          const data = await getBrowsers(siteId, start, end, limit, f)
+          return data.filter(b => b.browser && b.browser !== 'Unknown').map(b => ({ value: b.browser, label: b.browser, count: b.pageviews }))
+        }
+        case 'os': {
+          const data = await getOS(siteId, start, end, limit, f)
+          return data.filter(o => o.os && o.os !== 'Unknown').map(o => ({ value: o.os, label: o.os, count: o.pageviews }))
+        }
+        case 'device': {
+          const data = await getDevices(siteId, start, end, limit, f)
+          return data.filter(d => d.device && d.device !== 'Unknown').map(d => ({ value: d.device, label: d.device, count: d.pageviews }))
+        }
+        case 'utm_source':
+        case 'utm_medium':
+        case 'utm_campaign': {
+          const data = await getCampaigns(siteId, start, end, limit, f)
+          const map = new Map<string, number>()
+          const field = dimension === 'utm_source' ? 'source' : dimension === 'utm_medium' ? 'medium' : 'campaign'
+          data.forEach(c => {
+            const val = c[field]
+            if (val) map.set(val, (map.get(val) ?? 0) + c.pageviews)
+          })
+          return [...map.entries()].map(([v, count]) => ({ value: v, label: v, count }))
+        }
+        default:
+          return []
+      }
+    } catch {
+      return []
+    }
+  }, [siteId, dateRange.start, dateRange.end, filtersParam])
+
   // Sync filters to URL
   useEffect(() => {
     const url = new URL(window.location.href)
@@ -181,14 +252,11 @@ export default function SiteDashboardPage() {
     // Referrers
     const refs = referrers?.top_referrers ?? []
     if (refs.length > 0) {
-      s.referrer = [
-        { value: '', label: 'Direct', count: undefined },
-        ...refs.filter(r => r.referrer && r.referrer !== '').map(r => ({
-          value: r.referrer,
-          label: r.referrer,
-          count: r.pageviews,
-        })),
-      ]
+      s.referrer = refs.filter(r => r.referrer && r.referrer !== '').map(r => ({
+        value: r.referrer,
+        label: r.referrer,
+        count: r.pageviews,
+      }))
     }
 
     // Countries
@@ -461,7 +529,7 @@ export default function SiteDashboardPage() {
 
       {/* Dimension Filters */}
       <div className="flex items-center gap-2 flex-wrap mb-2">
-        <AddFilterDropdown onAdd={handleAddFilter} suggestions={filterSuggestions} />
+        <AddFilterDropdown onAdd={handleAddFilter} suggestions={filterSuggestions} onFetchSuggestions={handleFetchSuggestions} />
         <FilterBar filters={filters} onRemove={handleRemoveFilter} onClear={handleClearFilters} />
       </div>
 
diff --git a/components/dashboard/AddFilterDropdown.tsx b/components/dashboard/AddFilterDropdown.tsx
index e0068ce..6f70435 100644
--- a/components/dashboard/AddFilterDropdown.tsx
+++ b/components/dashboard/AddFilterDropdown.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useRef, useEffect } from 'react'
+import { useState, useRef, useEffect, useCallback } from 'react'
 import { DIMENSION_LABELS, OPERATORS, OPERATOR_LABELS, type DimensionFilter } from '@/lib/filters'
 
 export interface FilterSuggestion {
@@ -16,15 +16,18 @@ export interface FilterSuggestions {
 interface AddFilterDropdownProps {
   onAdd: (filter: DimensionFilter) => void
   suggestions?: FilterSuggestions
+  onFetchSuggestions?: (dimension: string) => Promise<FilterSuggestion[]>
 }
 
 const ALL_DIMS = ['page', 'referrer', 'country', 'region', 'city', 'browser', 'os', 'device', 'utm_source', 'utm_medium', 'utm_campaign']
 
-export default function AddFilterDropdown({ onAdd, suggestions = {} }: AddFilterDropdownProps) {
+export default function AddFilterDropdown({ onAdd, suggestions = {}, onFetchSuggestions }: AddFilterDropdownProps) {
   const [isOpen, setIsOpen] = useState(false)
   const [selectedDim, setSelectedDim] = useState<string | null>(null)
   const [operator, setOperator] = useState<DimensionFilter['operator']>('is')
   const [search, setSearch] = useState('')
+  const [fetchedSuggestions, setFetchedSuggestions] = useState<FilterSuggestion[]>([])
+  const [isFetching, setIsFetching] = useState(false)
   const ref = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
 
@@ -52,12 +55,32 @@ export default function AddFilterDropdown({ onAdd, suggestions = {} }: AddFilter
     if (selectedDim) inputRef.current?.focus()
   }, [selectedDim])
 
-  function handleClose() {
+  // Fetch full suggestions when a dimension is selected
+  useEffect(() => {
+    if (!selectedDim || !onFetchSuggestions) {
+      setFetchedSuggestions([])
+      return
+    }
+    let cancelled = false
+    setIsFetching(true)
+    onFetchSuggestions(selectedDim).then(data => {
+      if (!cancelled) {
+        setFetchedSuggestions(data)
+        setIsFetching(false)
+      }
+    }).catch(() => {
+      if (!cancelled) setIsFetching(false)
+    })
+    return () => { cancelled = true }
+  }, [selectedDim, onFetchSuggestions])
+
+  const handleClose = useCallback(() => {
     setIsOpen(false)
     setSelectedDim(null)
     setOperator('is')
     setSearch('')
-  }
+    setFetchedSuggestions([])
+  }, [])
 
   function handleSelectValue(value: string) {
     onAdd({ dimension: selectedDim!, operator, values: [value] })
@@ -70,7 +93,10 @@ export default function AddFilterDropdown({ onAdd, suggestions = {} }: AddFilter
     handleClose()
   }
 
-  const dimSuggestions = selectedDim ? (suggestions[selectedDim] || []) : []
+  // Use fetched data if available, fall back to prop suggestions
+  const dimSuggestions = selectedDim
+    ? (fetchedSuggestions.length > 0 ? fetchedSuggestions : (suggestions[selectedDim] || []))
+    : []
   const filtered = dimSuggestions.filter(s =>
     s.label.toLowerCase().includes(search.toLowerCase()) ||
     s.value.toLowerCase().includes(search.toLowerCase())
@@ -118,7 +144,7 @@ export default function AddFilterDropdown({ onAdd, suggestions = {} }: AddFilter
               {/* Header with back button */}
               <div className="flex items-center gap-2 px-3 pt-3 pb-2">
                 <button
-                  onClick={() => { setSelectedDim(null); setSearch(''); setOperator('is') }}
+                  onClick={() => { setSelectedDim(null); setSearch(''); setOperator('is'); setFetchedSuggestions([]) }}
                   className="p-1 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors cursor-pointer rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-800"
                 >
                   <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -168,7 +194,11 @@ export default function AddFilterDropdown({ onAdd, suggestions = {} }: AddFilter
               </div>
 
               {/* Values list */}
-              {filtered.length > 0 && (
+              {isFetching ? (
+                <div className="px-4 py-6 text-center">
+                  <div className="inline-block w-4 h-4 border-2 border-neutral-300 dark:border-neutral-600 border-t-brand-orange rounded-full animate-spin" />
+                </div>
+              ) : filtered.length > 0 ? (
                 <div className="max-h-52 overflow-y-auto border-t border-neutral-100 dark:border-neutral-800">
                   {filtered.map(s => (
                     <button
@@ -185,10 +215,7 @@ export default function AddFilterDropdown({ onAdd, suggestions = {} }: AddFilter
                     </button>
                   ))}
                 </div>
-              )}
-
-              {/* Custom value apply */}
-              {search.trim() && filtered.length === 0 && (
+              ) : search.trim() ? (
                 <div className="px-3 py-3 border-t border-neutral-100 dark:border-neutral-800">
                   <button
                     onClick={handleSubmitCustom}
@@ -197,11 +224,11 @@ export default function AddFilterDropdown({ onAdd, suggestions = {} }: AddFilter
                     Filter by &ldquo;{search.trim()}&rdquo;
                   </button>
                 </div>
-              )}
+              ) : null}
             </>
           )}
         </div>
       )}
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/lib/filters.ts b/lib/filters.ts
index 608083a..e6fbac2 100644
--- a/lib/filters.ts
+++ b/lib/filters.ts
@@ -55,8 +55,6 @@ export function parseFiltersFromURL(raw: string): DimensionFilter[] {
 export function filterLabel(f: DimensionFilter): string {
   const dim = DIMENSION_LABELS[f.dimension] || f.dimension
   const op = OPERATOR_LABELS[f.operator] || f.operator
-  const rawVal = f.values.length > 1 ? `${f.values[0]} +${f.values.length - 1}` : f.values[0]
-  // Show "Direct" for empty referrer values (direct traffic has no referrer in DB)
-  const val = f.dimension === 'referrer' && rawVal === '' ? 'Direct' : rawVal
+  const val = f.values.length > 1 ? `${f.values[0]} +${f.values.length - 1}` : f.values[0]
   return `${dim} ${op} ${val}`
 }

From 068943974ee94fbff31d32decd9bdf3a4a28d625 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 6 Mar 2026 23:38:46 +0100
Subject: [PATCH 18/28] style: replace View All buttons with expand icon,
 switch to underline tabs

- Replace "View All" text buttons with a subtle expand/fullscreen icon
  across all 5 dashboard panels
- Convert pill-style tab switchers to underline tabs with brand-orange
  active indicator in Content, Locations, and Technology panels
---
 components/dashboard/Campaigns.tsx    | 12 +++++++-----
 components/dashboard/ContentStats.tsx | 15 +++++++++------
 components/dashboard/Locations.tsx    | 15 +++++++++------
 components/dashboard/TechSpecs.tsx    | 15 +++++++++------
 components/dashboard/TopReferrers.tsx |  7 +++++--
 5 files changed, 39 insertions(+), 25 deletions(-)

diff --git a/components/dashboard/Campaigns.tsx b/components/dashboard/Campaigns.tsx
index f8f49ab..f0eae00 100644
--- a/components/dashboard/Campaigns.tsx
+++ b/components/dashboard/Campaigns.tsx
@@ -192,13 +192,15 @@ export default function Campaigns({ siteId, dateRange, filters }: CampaignsProps
               Build URL
             </Button>
             {showViewAll && (
-              <Button
-                variant="ghost"
+              <button
                 onClick={() => setIsModalOpen(true)}
-                className="h-8 px-3 text-xs"
+                className="p-1.5 text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange rounded-md cursor-pointer"
+                title="View all"
               >
-                View All
-              </Button>
+                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
+                </svg>
+              </button>
             )}
           </div>
         </div>
diff --git a/components/dashboard/ContentStats.tsx b/components/dashboard/ContentStats.tsx
index 4339bd0..c4129ad 100644
--- a/components/dashboard/ContentStats.tsx
+++ b/components/dashboard/ContentStats.tsx
@@ -103,23 +103,26 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
             {showViewAll && (
               <button
                 onClick={() => setIsModalOpen(true)}
-                className="text-xs font-medium text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange focus:rounded"
+                className="p-1.5 text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange rounded-md cursor-pointer"
+                title="View all"
               >
-                View All
+                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
+                </svg>
               </button>
             )}
           </div>
-          <div className="flex p-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg" role="tablist" aria-label="Content view tabs" onKeyDown={handleTabKeyDown}>
+          <div className="flex gap-1" role="tablist" aria-label="Content view tabs" onKeyDown={handleTabKeyDown}>
             {(['top_pages', 'entry_pages', 'exit_pages'] as Tab[]).map((tab) => (
               <button
                 key={tab}
                 onClick={() => setActiveTab(tab)}
                 role="tab"
                 aria-selected={activeTab === tab}
-                className={`px-3 py-1 text-xs font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange ${
+                className={`px-2.5 py-1 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange rounded cursor-pointer border-b-2 ${
                   activeTab === tab
-                    ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
-                    : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'
+                    ? 'border-brand-orange text-neutral-900 dark:text-white'
+                    : 'border-transparent text-neutral-400 dark:text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300'
                 }`}
               >
                 {getTabLabel(tab)}
diff --git a/components/dashboard/Locations.tsx b/components/dashboard/Locations.tsx
index ea6ed6a..83d816f 100644
--- a/components/dashboard/Locations.tsx
+++ b/components/dashboard/Locations.tsx
@@ -205,23 +205,26 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
             {showViewAll && (
               <button
                 onClick={() => setIsModalOpen(true)}
-                className="text-xs font-medium text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange focus:rounded"
+                className="p-1.5 text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange rounded-md cursor-pointer"
+                title="View all"
               >
-                View All
+                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
+                </svg>
               </button>
             )}
           </div>
-          <div className="flex p-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg" role="tablist" aria-label="Location view tabs" onKeyDown={handleTabKeyDown}>
+          <div className="flex gap-1" role="tablist" aria-label="Location view tabs" onKeyDown={handleTabKeyDown}>
             {(['map', 'countries', 'regions', 'cities'] as Tab[]).map((tab) => (
               <button
                 key={tab}
                 onClick={() => setActiveTab(tab)}
                 role="tab"
                 aria-selected={activeTab === tab}
-                className={`px-3 py-1 text-xs font-medium rounded-lg transition-colors capitalize focus:outline-none focus:ring-2 focus:ring-brand-orange ${
+                className={`px-2.5 py-1 text-xs font-medium transition-colors capitalize focus:outline-none focus:ring-2 focus:ring-brand-orange rounded cursor-pointer border-b-2 ${
                   activeTab === tab
-                    ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
-                    : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'
+                    ? 'border-brand-orange text-neutral-900 dark:text-white'
+                    : 'border-transparent text-neutral-400 dark:text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300'
                 }`}
               >
                 {tab}
diff --git a/components/dashboard/TechSpecs.tsx b/components/dashboard/TechSpecs.tsx
index 422f1d7..3a4b787 100644
--- a/components/dashboard/TechSpecs.tsx
+++ b/components/dashboard/TechSpecs.tsx
@@ -129,23 +129,26 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
             {showViewAll && (
               <button
                 onClick={() => setIsModalOpen(true)}
-                className="text-xs font-medium text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange focus:rounded"
+                className="p-1.5 text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange rounded-md cursor-pointer"
+                title="View all"
               >
-                View All
+                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
+                </svg>
               </button>
             )}
           </div>
-          <div className="flex p-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg" role="tablist" aria-label="Technology view tabs" onKeyDown={handleTabKeyDown}>
+          <div className="flex gap-1" role="tablist" aria-label="Technology view tabs" onKeyDown={handleTabKeyDown}>
             {(['browsers', 'os', 'devices', 'screens'] as Tab[]).map((tab) => (
               <button
                 key={tab}
                 onClick={() => setActiveTab(tab)}
                 role="tab"
                 aria-selected={activeTab === tab}
-                className={`px-3 py-1 text-xs font-medium rounded-lg transition-colors capitalize focus:outline-none focus:ring-2 focus:ring-brand-orange ${
+                className={`px-2.5 py-1 text-xs font-medium transition-colors capitalize focus:outline-none focus:ring-2 focus:ring-brand-orange rounded cursor-pointer border-b-2 ${
                   activeTab === tab
-                    ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
-                    : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'
+                    ? 'border-brand-orange text-neutral-900 dark:text-white'
+                    : 'border-transparent text-neutral-400 dark:text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300'
                 }`}
               >
                 {tab}
diff --git a/components/dashboard/TopReferrers.tsx b/components/dashboard/TopReferrers.tsx
index b1df086..cd071db 100644
--- a/components/dashboard/TopReferrers.tsx
+++ b/components/dashboard/TopReferrers.tsx
@@ -91,9 +91,12 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
           {showViewAll && (
             <button
               onClick={() => setIsModalOpen(true)}
-              className="text-xs font-medium text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange focus:rounded"
+              className="p-1.5 text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange rounded-md cursor-pointer"
+              title="View all"
             >
-              View All
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
+              </svg>
             </button>
           )}
         </div>

From 7fc40f2a830ed67c2f93e0bc1fd2956237267c29 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 6 Mar 2026 23:46:21 +0100
Subject: [PATCH 19/28] style: move View All to bottom of list, clean up panel
 headers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove expand icon from all panel headers. Add a subtle "View all ›"
link at the bottom of each data list that appears when there's more
data than shown. Headers now only contain title and tabs.
---
 components/dashboard/Campaigns.tsx    | 29 +++++++++++----------
 components/dashboard/ContentStats.tsx | 37 +++++++++++++--------------
 components/dashboard/Locations.tsx    | 37 +++++++++++++--------------
 components/dashboard/TechSpecs.tsx    | 37 +++++++++++++--------------
 components/dashboard/TopReferrers.tsx | 29 +++++++++++----------
 5 files changed, 84 insertions(+), 85 deletions(-)

diff --git a/components/dashboard/Campaigns.tsx b/components/dashboard/Campaigns.tsx
index f0eae00..431bac5 100644
--- a/components/dashboard/Campaigns.tsx
+++ b/components/dashboard/Campaigns.tsx
@@ -191,17 +191,6 @@ export default function Campaigns({ siteId, dateRange, filters }: CampaignsProps
               <PlusIcon className="w-3.5 h-3.5" />
               Build URL
             </Button>
-            {showViewAll && (
-              <button
-                onClick={() => setIsModalOpen(true)}
-                className="p-1.5 text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange rounded-md cursor-pointer"
-                title="View all"
-              >
-                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
-                </svg>
-              </button>
-            )}
           </div>
         </div>
 
@@ -268,9 +257,21 @@ export default function Campaigns({ siteId, dateRange, filters }: CampaignsProps
                 </div>
               </div>
             ))}
-            {Array.from({ length: emptySlots }).map((_, i) => (
-              <div key={`empty-${i}`} className="h-9 px-2 -mx-2" aria-hidden="true" />
-            ))}
+            {showViewAll ? (
+              <button
+                onClick={() => setIsModalOpen(true)}
+                className="flex items-center justify-center gap-1.5 h-9 w-full text-xs font-medium text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange transition-colors cursor-pointer rounded-lg px-2 -mx-2"
+              >
+                View all
+                <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+                </svg>
+              </button>
+            ) : (
+              Array.from({ length: emptySlots }).map((_, i) => (
+                <div key={`empty-${i}`} className="h-9 px-2 -mx-2" aria-hidden="true" />
+              ))
+            )}
           </div>
         ) : (
           <div className="flex-1 min-h-[270px] flex flex-col items-center justify-center text-center px-6 py-8 gap-4">
diff --git a/components/dashboard/ContentStats.tsx b/components/dashboard/ContentStats.tsx
index c4129ad..21add44 100644
--- a/components/dashboard/ContentStats.tsx
+++ b/components/dashboard/ContentStats.tsx
@@ -96,22 +96,9 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
     <>
       <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-6">
-          <div className="flex items-center gap-4">
-            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
-              Content
-            </h3>
-            {showViewAll && (
-              <button
-                onClick={() => setIsModalOpen(true)}
-                className="p-1.5 text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange rounded-md cursor-pointer"
-                title="View all"
-              >
-                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
-                </svg>
-              </button>
-            )}
-          </div>
+          <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+            Content
+          </h3>
           <div className="flex gap-1" role="tablist" aria-label="Content view tabs" onKeyDown={handleTabKeyDown}>
             {(['top_pages', 'entry_pages', 'exit_pages'] as Tab[]).map((tab) => (
               <button
@@ -166,9 +153,21 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
                   </div>
                 </div>
               ))}
-              {Array.from({ length: emptySlots }).map((_, i) => (
-                <div key={`empty-${i}`} className="h-9 px-2 -mx-2" aria-hidden="true" />
-              ))}
+              {showViewAll ? (
+                <button
+                  onClick={() => setIsModalOpen(true)}
+                  className="flex items-center justify-center gap-1.5 h-9 w-full text-xs font-medium text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange transition-colors cursor-pointer rounded-lg px-2 -mx-2"
+                >
+                  View all
+                  <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+                  </svg>
+                </button>
+              ) : (
+                Array.from({ length: emptySlots }).map((_, i) => (
+                  <div key={`empty-${i}`} className="h-9 px-2 -mx-2" aria-hidden="true" />
+                ))
+              )}
             </>
           ) : (
             <div className="h-full flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
diff --git a/components/dashboard/Locations.tsx b/components/dashboard/Locations.tsx
index 83d816f..5cc15d4 100644
--- a/components/dashboard/Locations.tsx
+++ b/components/dashboard/Locations.tsx
@@ -198,22 +198,9 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
     <>
       <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-6">
-          <div className="flex items-center gap-4">
-            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
-              Locations
-            </h3>
-            {showViewAll && (
-              <button
-                onClick={() => setIsModalOpen(true)}
-                className="p-1.5 text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange rounded-md cursor-pointer"
-                title="View all"
-              >
-                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
-                </svg>
-              </button>
-            )}
-          </div>
+          <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+            Locations
+          </h3>
           <div className="flex gap-1" role="tablist" aria-label="Location view tabs" onKeyDown={handleTabKeyDown}>
             {(['map', 'countries', 'regions', 'cities'] as Tab[]).map((tab) => (
               <button
@@ -284,9 +271,21 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
                     </div>
                   )
                 })}
-                {Array.from({ length: emptySlots }).map((_, i) => (
-                  <div key={`empty-${i}`} className="h-9 px-2 -mx-2" aria-hidden="true" />
-              ))}
+                {showViewAll ? (
+                  <button
+                    onClick={() => setIsModalOpen(true)}
+                    className="flex items-center justify-center gap-1.5 h-9 w-full text-xs font-medium text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange transition-colors cursor-pointer rounded-lg px-2 -mx-2"
+                  >
+                    View all
+                    <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+                    </svg>
+                  </button>
+                ) : (
+                  Array.from({ length: emptySlots }).map((_, i) => (
+                    <div key={`empty-${i}`} className="h-9 px-2 -mx-2" aria-hidden="true" />
+                  ))
+                )}
             </>
           ) : (
             <div className="h-full flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
diff --git a/components/dashboard/TechSpecs.tsx b/components/dashboard/TechSpecs.tsx
index 3a4b787..170cda6 100644
--- a/components/dashboard/TechSpecs.tsx
+++ b/components/dashboard/TechSpecs.tsx
@@ -122,22 +122,9 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
     <>
       <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-6">
-          <div className="flex items-center gap-4">
-            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
-              Technology
-            </h3>
-            {showViewAll && (
-              <button
-                onClick={() => setIsModalOpen(true)}
-                className="p-1.5 text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange rounded-md cursor-pointer"
-                title="View all"
-              >
-                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
-                </svg>
-              </button>
-            )}
-          </div>
+          <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+            Technology
+          </h3>
           <div className="flex gap-1" role="tablist" aria-label="Technology view tabs" onKeyDown={handleTabKeyDown}>
             {(['browsers', 'os', 'devices', 'screens'] as Tab[]).map((tab) => (
               <button
@@ -188,9 +175,21 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
                   </div>
                 )
               })}
-              {Array.from({ length: emptySlots }).map((_, i) => (
-                <div key={`empty-${i}`} className="h-9 px-2 -mx-2" aria-hidden="true" />
-              ))}
+              {showViewAll ? (
+                <button
+                  onClick={() => setIsModalOpen(true)}
+                  className="flex items-center justify-center gap-1.5 h-9 w-full text-xs font-medium text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange transition-colors cursor-pointer rounded-lg px-2 -mx-2"
+                >
+                  View all
+                  <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+                  </svg>
+                </button>
+              ) : (
+                Array.from({ length: emptySlots }).map((_, i) => (
+                  <div key={`empty-${i}`} className="h-9 px-2 -mx-2" aria-hidden="true" />
+                ))
+              )}
             </>
           ) : (
             <div className="h-full flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
diff --git a/components/dashboard/TopReferrers.tsx b/components/dashboard/TopReferrers.tsx
index cd071db..7e40a36 100644
--- a/components/dashboard/TopReferrers.tsx
+++ b/components/dashboard/TopReferrers.tsx
@@ -88,17 +88,6 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
           <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
             Top Referrers
           </h3>
-          {showViewAll && (
-            <button
-              onClick={() => setIsModalOpen(true)}
-              className="p-1.5 text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange rounded-md cursor-pointer"
-              title="View all"
-            >
-              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
-              </svg>
-            </button>
-          )}
         </div>
 
         <div className="space-y-2 flex-1 min-h-[270px]">
@@ -128,9 +117,21 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
                   </div>
                 </div>
               ))}
-              {Array.from({ length: emptySlots }).map((_, i) => (
-                <div key={`empty-${i}`} className="h-9 px-2 -mx-2" aria-hidden="true" />
-              ))}
+              {showViewAll ? (
+                <button
+                  onClick={() => setIsModalOpen(true)}
+                  className="flex items-center justify-center gap-1.5 h-9 w-full text-xs font-medium text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange transition-colors cursor-pointer rounded-lg px-2 -mx-2"
+                >
+                  View all
+                  <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+                  </svg>
+                </button>
+              ) : (
+                Array.from({ length: emptySlots }).map((_, i) => (
+                  <div key={`empty-${i}`} className="h-9 px-2 -mx-2" aria-hidden="true" />
+                ))
+              )}
             </>
           ) : (
             <div className="h-full flex flex-col items-center justify-center text-center px-6 py-8 gap-3">

From 34e59894afff5726b3c1ea36168d4c9f49c73ca9 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 6 Mar 2026 23:52:47 +0100
Subject: [PATCH 20/28] style: redesign Campaigns panel to match dashboard
 layout, use filter icon

Rebuild Campaigns from table layout to simple row-based design matching
Content, Referrers, Locations, and Technology panels. Add click-to-filter
by utm_source. Change filter button icon from plus to funnel.
---
 app/sites/[id]/page.tsx                    |   2 +-
 components/dashboard/AddFilterDropdown.tsx |   2 +-
 components/dashboard/Campaigns.tsx         | 344 ++++++++-------------
 3 files changed, 139 insertions(+), 209 deletions(-)

diff --git a/app/sites/[id]/page.tsx b/app/sites/[id]/page.tsx
index c115c85..8644980 100644
--- a/app/sites/[id]/page.tsx
+++ b/app/sites/[id]/page.tsx
@@ -609,7 +609,7 @@ export default function SiteDashboardPage() {
 
       {/* Campaigns Report */}
       <div className="mb-8">
-        <Campaigns siteId={siteId} dateRange={dateRange} filters={filtersParam || undefined} />
+        <Campaigns siteId={siteId} dateRange={dateRange} filters={filtersParam || undefined} onFilter={handleAddFilter} />
       </div>
 
       <div className="grid gap-6 lg:grid-cols-2 mb-8">
diff --git a/components/dashboard/AddFilterDropdown.tsx b/components/dashboard/AddFilterDropdown.tsx
index 6f70435..2ad4066 100644
--- a/components/dashboard/AddFilterDropdown.tsx
+++ b/components/dashboard/AddFilterDropdown.tsx
@@ -115,7 +115,7 @@ export default function AddFilterDropdown({ onAdd, suggestions = {}, onFetchSugg
         }`}
       >
         <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-          <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
+          <path strokeLinecap="round" strokeLinejoin="round" d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z" />
         </svg>
         Filter
       </button>
diff --git a/components/dashboard/Campaigns.tsx b/components/dashboard/Campaigns.tsx
index 431bac5..33433a3 100644
--- a/components/dashboard/Campaigns.tsx
+++ b/components/dashboard/Campaigns.tsx
@@ -5,52 +5,30 @@ import { logger } from '@/lib/utils/logger'
 import Link from 'next/link'
 import Image from 'next/image'
 import { formatNumber } from '@ciphera-net/ui'
-import { Modal, ArrowRightIcon, Button } from '@ciphera-net/ui'
-import { TableSkeleton } from '@/components/skeletons'
-import { ChevronDownIcon, DownloadIcon } from '@ciphera-net/ui'
+import { Modal, ArrowRightIcon } from '@ciphera-net/ui'
+import { ListSkeleton } from '@/components/skeletons'
 import { getCampaigns, CampaignStat } from '@/lib/api/stats'
 import { getReferrerFavicon, getReferrerIcon, getReferrerDisplayName } from '@/lib/utils/icons'
 import { FaBullhorn } from 'react-icons/fa'
-import { PlusIcon } from '@radix-ui/react-icons'
 import UtmBuilder from '@/components/tools/UtmBuilder'
+import { type DimensionFilter } from '@/lib/filters'
 
 interface CampaignsProps {
   siteId: string
   dateRange: { start: string, end: string }
   filters?: string
+  onFilter?: (filter: DimensionFilter) => void
 }
 
 const LIMIT = 7
-const EMPTY_LABEL = '—'
 
-type SortKey = 'source' | 'medium' | 'campaign' | 'visitors' | 'pageviews'
-type SortDir = 'asc' | 'desc'
-
-function sortCampaigns(data: CampaignStat[], key: SortKey, dir: SortDir): CampaignStat[] {
-  return [...data].sort((a, b) => {
-    const av = key === 'visitors' ? a.visitors : key === 'pageviews' ? a.pageviews : (a[key] || '').toLowerCase()
-    const bv = key === 'visitors' ? b.visitors : key === 'pageviews' ? b.pageviews : (b[key] || '').toLowerCase()
-    if (typeof av === 'number' && typeof bv === 'number') {
-      return dir === 'asc' ? av - bv : bv - av
-    }
-    const cmp = String(av).localeCompare(String(bv))
-    return dir === 'asc' ? cmp : -cmp
-  })
-}
-
-function campaignRowKey(item: CampaignStat): string {
-  return `${item.source}|${item.medium}|${item.campaign}`
-}
-
-export default function Campaigns({ siteId, dateRange, filters }: CampaignsProps) {
+export default function Campaigns({ siteId, dateRange, filters, onFilter }: CampaignsProps) {
   const [data, setData] = useState<CampaignStat[]>([])
   const [isLoading, setIsLoading] = useState(true)
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [isBuilderOpen, setIsBuilderOpen] = useState(false)
   const [fullData, setFullData] = useState<CampaignStat[]>([])
   const [isLoadingFull, setIsLoadingFull] = useState(false)
-  const [sortKey, setSortKey] = useState<SortKey>('visitors')
-  const [sortDir, setSortDir] = useState<SortDir>('desc')
   const [faviconFailed, setFaviconFailed] = useState<Set<string>>(new Set())
 
   useEffect(() => {
@@ -88,26 +66,19 @@ export default function Campaigns({ siteId, dateRange, filters }: CampaignsProps
   }, [isModalOpen, siteId, dateRange, filters])
 
   const sortedData = useMemo(
-    () => sortCampaigns(data, sortKey, sortDir),
-    [data, sortKey, sortDir]
+    () => [...data].sort((a, b) => b.visitors - a.visitors),
+    [data]
   )
   const sortedFullData = useMemo(
-    () => sortCampaigns(fullData.length > 0 ? fullData : data, sortKey, sortDir),
-    [fullData, data, sortKey, sortDir]
+    () => [...(fullData.length > 0 ? fullData : data)].sort((a, b) => b.visitors - a.visitors),
+    [fullData, data]
   )
+
+  const totalVisitors = sortedData.reduce((sum, c) => sum + c.visitors, 0)
   const hasData = data.length > 0
   const displayedData = hasData ? sortedData.slice(0, LIMIT) : []
-  const emptySlots = Math.max(0, LIMIT - displayedData.length)
   const showViewAll = hasData && data.length > LIMIT
-
-  const handleSort = (key: SortKey) => {
-    if (sortKey === key) {
-      setSortDir(d => d === 'asc' ? 'desc' : 'asc')
-    } else {
-      setSortKey(key)
-      setSortDir(key === 'visitors' || key === 'pageviews' ? 'desc' : 'asc')
-    }
-  }
+  const emptySlots = Math.max(0, LIMIT - displayedData.length)
 
   function renderSourceIcon(source: string) {
     const faviconUrl = getReferrerFavicon(source)
@@ -128,14 +99,21 @@ export default function Campaigns({ siteId, dateRange, filters }: CampaignsProps
     return <span className="text-lg flex-shrink-0">{getReferrerIcon(source)}</span>
   }
 
+  function getSecondaryLabel(item: CampaignStat): string | null {
+    const parts: string[] = []
+    if (item.medium) parts.push(item.medium)
+    if (item.campaign) parts.push(item.campaign)
+    return parts.length > 0 ? parts.join(' · ') : null
+  }
+
   const handleExportCampaigns = () => {
-    const rows = sortedData.length > 0 ? sortedData : data
+    const rows = sortedFullData.length > 0 ? sortedFullData : sortedData
     if (rows.length === 0) return
     const header = ['Source', 'Medium', 'Campaign', 'Visitors', 'Pageviews']
     const csvRows = [
       header.join(','),
       ...rows.map(r =>
-        [r.source, r.medium || EMPTY_LABEL, r.campaign || EMPTY_LABEL, r.visitors, r.pageviews].join(',')
+        [r.source, r.medium || '', r.campaign || '', r.visitors, r.pageviews].join(',')
       ),
     ]
     const blob = new Blob([csvRows.join('\n')], { type: 'text/csv;charset=utf-8;' })
@@ -149,22 +127,6 @@ export default function Campaigns({ siteId, dateRange, filters }: CampaignsProps
     URL.revokeObjectURL(url)
   }
 
-  const SortHeader = ({ label, colKey, className = '' }: { label: string; colKey: SortKey; className?: string }) => (
-    <button
-      type="button"
-      onClick={() => handleSort(colKey)}
-      className={`inline-flex items-center gap-1 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-inset rounded ${className}`}
-      aria-label={`Sort by ${label}`}
-    >
-      {label}
-      {sortKey === colKey ? (
-        <ChevronDownIcon className={`w-3 h-3 text-brand-orange ${sortDir === 'asc' ? 'rotate-180' : ''}`} />
-      ) : (
-        <span className="w-3 h-3 inline-block text-neutral-400" aria-hidden />
-      )}
-    </button>
-  )
-
   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">
@@ -172,127 +134,88 @@ export default function Campaigns({ siteId, dateRange, filters }: CampaignsProps
           <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
             Campaigns
           </h3>
-          <div className="flex items-center gap-2">
-            {hasData && (
-              <Button
-                variant="ghost"
-                onClick={handleExportCampaigns}
-                className="h-8 px-3 text-xs gap-2"
-              >
-                <DownloadIcon className="w-3.5 h-3.5" />
-                Export
-              </Button>
-            )}
-            <Button
-              variant="ghost"
-              onClick={() => setIsBuilderOpen(true)}
-              className="h-8 px-3 text-xs gap-2"
-            >
-              <PlusIcon className="w-3.5 h-3.5" />
-              Build URL
-            </Button>
-          </div>
+          <button
+            onClick={() => setIsBuilderOpen(true)}
+            className="text-xs font-medium text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange transition-colors cursor-pointer"
+          >
+            Build URL
+          </button>
         </div>
 
-        {isLoading ? (
-          <div className="space-y-2 flex-1 min-h-[270px]">
-            <div className="grid grid-cols-12 gap-2 mb-2 px-2">
-              <div className="col-span-4 h-4 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800" />
-              <div className="col-span-2 h-4 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800" />
-              <div className="col-span-2 h-4 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800" />
-              <div className="col-span-2 h-4 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800" />
-              <div className="col-span-2 h-4 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800" />
-            </div>
-            {Array.from({ length: 7 }).map((_, i) => (
-              <div key={`skeleton-${i}`} className="grid grid-cols-12 gap-2 h-9 px-2 -mx-2">
-                <div className="col-span-4 h-4 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800" />
-                <div className="col-span-2 h-4 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800" />
-                <div className="col-span-2 h-4 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800" />
-                <div className="col-span-2 h-4 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800" />
-                <div className="col-span-2 h-4 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800" />
+        <div className="space-y-2 flex-1 min-h-[270px]">
+          {isLoading ? (
+            <ListSkeleton rows={LIMIT} />
+          ) : hasData ? (
+            <>
+              {displayedData.map((item) => {
+                const secondary = getSecondaryLabel(item)
+                return (
+                  <div
+                    key={`${item.source}|${item.medium}|${item.campaign}`}
+                    onClick={() => onFilter?.({ dimension: 'utm_source', operator: 'is', values: [item.source] })}
+                    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${onFilter ? ' cursor-pointer' : ''}`}
+                  >
+                    <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3 min-w-0">
+                      {renderSourceIcon(item.source)}
+                      <div className="truncate min-w-0">
+                        <span className="truncate font-medium" title={item.source}>
+                          {getReferrerDisplayName(item.source)}
+                        </span>
+                        {secondary && (
+                          <span className="text-neutral-400 dark:text-neutral-500 text-xs ml-1.5" title={secondary}>
+                            {secondary}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2 ml-4">
+                      <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
+                        {totalVisitors > 0 ? `${Math.round((item.visitors / totalVisitors) * 100)}%` : ''}
+                      </span>
+                      <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+                        {formatNumber(item.visitors)}
+                      </span>
+                    </div>
+                  </div>
+                )
+              })}
+              {showViewAll ? (
+                <button
+                  onClick={() => setIsModalOpen(true)}
+                  className="flex items-center justify-center gap-1.5 h-9 w-full text-xs font-medium text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange transition-colors cursor-pointer rounded-lg px-2 -mx-2"
+                >
+                  View all
+                  <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+                  </svg>
+                </button>
+              ) : (
+                Array.from({ length: emptySlots }).map((_, i) => (
+                  <div key={`empty-${i}`} className="h-9 px-2 -mx-2" aria-hidden="true" />
+                ))
+              )}
+            </>
+          ) : (
+            <div className="h-full flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
+              <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
+                <FaBullhorn className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
               </div>
-            ))}
-          </div>
-        ) : hasData ? (
-          <div className="space-y-2 flex-1 min-h-[270px]">
-            <div className="grid grid-cols-12 gap-2 text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-2 px-2">
-              <div className="col-span-4">
-                <SortHeader label="Source" colKey="source" className="text-left" />
-              </div>
-              <div className="col-span-2">
-                <SortHeader label="Medium" colKey="medium" className="text-left" />
-              </div>
-              <div className="col-span-2">
-                <SortHeader label="Campaign" colKey="campaign" className="text-left" />
-              </div>
-              <div className="col-span-2 text-right">
-                <SortHeader label="Visitors" colKey="visitors" className="text-right justify-end" />
-              </div>
-              <div className="col-span-2 text-right">
-                <SortHeader label="Pageviews" colKey="pageviews" className="text-right justify-end" />
-              </div>
-            </div>
-            {displayedData.map((item) => (
-              <div
-                key={campaignRowKey(item)}
-                className="grid grid-cols-12 gap-2 items-center h-9 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors text-sm"
+              <h4 className="font-semibold text-neutral-900 dark:text-white">
+                Track your marketing campaigns
+              </h4>
+              <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-xs">
+                Add UTM parameters to your links to see campaign performance here.
+              </p>
+              <Link
+                href="/installation"
+                className="inline-flex items-center gap-2 text-sm font-medium text-brand-orange hover:text-brand-orange/90 hover:underline focus:outline-none focus:ring-2 focus:ring-brand-orange/20 rounded"
               >
-                <div className="col-span-4 flex items-center gap-3 truncate">
-                  {renderSourceIcon(item.source)}
-                  <span className="truncate text-neutral-900 dark:text-white font-medium" title={item.source}>
-                    {getReferrerDisplayName(item.source)}
-                  </span>
-                </div>
-                <div className="col-span-2 truncate text-neutral-500 dark:text-neutral-400" title={item.medium}>
-                  {item.medium || EMPTY_LABEL}
-                </div>
-                <div className="col-span-2 truncate text-neutral-500 dark:text-neutral-400" title={item.campaign}>
-                  {item.campaign || EMPTY_LABEL}
-                </div>
-                <div className="col-span-2 text-right font-semibold text-neutral-900 dark:text-white">
-                  {formatNumber(item.visitors)}
-                </div>
-                <div className="col-span-2 text-right text-neutral-600 dark:text-neutral-400">
-                  {formatNumber(item.pageviews)}
-                </div>
-              </div>
-            ))}
-            {showViewAll ? (
-              <button
-                onClick={() => setIsModalOpen(true)}
-                className="flex items-center justify-center gap-1.5 h-9 w-full text-xs font-medium text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange transition-colors cursor-pointer rounded-lg px-2 -mx-2"
-              >
-                View all
-                <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
-                </svg>
-              </button>
-            ) : (
-              Array.from({ length: emptySlots }).map((_, i) => (
-                <div key={`empty-${i}`} className="h-9 px-2 -mx-2" aria-hidden="true" />
-              ))
-            )}
-          </div>
-        ) : (
-          <div className="flex-1 min-h-[270px] flex flex-col items-center justify-center text-center px-6 py-8 gap-4">
-            <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
-              <FaBullhorn className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
+                Learn more
+                <ArrowRightIcon className="w-4 h-4" />
+              </Link>
             </div>
-            <h4 className="font-semibold text-neutral-900 dark:text-white">
-              Track your marketing campaigns
-            </h4>
-            <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-md">
-              Add <code className="px-1.5 py-0.5 rounded bg-neutral-200 dark:bg-neutral-700 text-xs font-mono">utm_source</code>, <code className="px-1.5 py-0.5 rounded bg-neutral-200 dark:bg-neutral-700 text-xs font-mono">utm_medium</code>, and <code className="px-1.5 py-0.5 rounded bg-neutral-200 dark:bg-neutral-700 text-xs font-mono">utm_campaign</code> parameters to your links to see them here.
-            </p>
-            <Link
-              href="/installation"
-              className="inline-flex items-center gap-2 text-sm font-medium text-brand-orange hover:text-brand-orange/90 hover:underline focus:outline-none focus:ring-2 focus:ring-brand-orange/20 rounded"
-            >
-              Read documentation
-              <ArrowRightIcon className="w-4 h-4" />
-            </Link>
-          </div>
-        )}
+          )}
+        </div>
       </div>
 
       <Modal
@@ -300,45 +223,52 @@ export default function Campaigns({ siteId, dateRange, filters }: CampaignsProps
         onClose={() => setIsModalOpen(false)}
         title="All Campaigns"
       >
-        <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
+        <div className="space-y-1 max-h-[60vh] overflow-y-auto pr-2">
           {isLoadingFull ? (
             <div className="py-4">
-              <TableSkeleton rows={10} cols={5} />
+              <ListSkeleton rows={10} />
             </div>
           ) : (
             <>
-              <div className="grid grid-cols-12 gap-2 text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-2 px-2 sticky top-0 bg-white dark:bg-neutral-900 py-2 z-10">
-                <div className="col-span-4">Source</div>
-                <div className="col-span-2">Medium</div>
-                <div className="col-span-2">Campaign</div>
-                <div className="col-span-2 text-right">Visitors</div>
-                <div className="col-span-2 text-right">Pageviews</div>
-              </div>
-              {sortedFullData.map((item) => (
-                <div
-                  key={campaignRowKey(item)}
-                  className="grid grid-cols-12 gap-2 items-center py-2 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors text-sm border-b border-neutral-100 dark:border-neutral-800 last:border-0"
+              <div className="flex items-center justify-end mb-2">
+                <button
+                  onClick={handleExportCampaigns}
+                  className="text-xs font-medium text-neutral-400 hover:text-brand-orange transition-colors cursor-pointer"
                 >
-                  <div className="col-span-4 flex items-center gap-3 truncate">
-                    {renderSourceIcon(item.source)}
-                    <span className="truncate text-neutral-900 dark:text-white font-medium" title={item.source}>
-                      {getReferrerDisplayName(item.source)}
-                    </span>
+                  Export CSV
+                </button>
+              </div>
+              {sortedFullData.map((item) => {
+                const secondary = getSecondaryLabel(item)
+                return (
+                  <div
+                    key={`${item.source}|${item.medium}|${item.campaign}`}
+                    className="flex items-center justify-between py-2 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors"
+                  >
+                    <div className="flex-1 truncate flex items-center gap-3 min-w-0">
+                      {renderSourceIcon(item.source)}
+                      <div className="min-w-0">
+                        <span className="text-neutral-900 dark:text-white font-medium truncate" title={item.source}>
+                          {getReferrerDisplayName(item.source)}
+                        </span>
+                        {secondary && (
+                          <span className="text-neutral-400 dark:text-neutral-500 text-xs ml-1.5" title={secondary}>
+                            {secondary}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-4 ml-4 text-sm">
+                      <span className="font-semibold text-neutral-900 dark:text-white">
+                        {formatNumber(item.visitors)}
+                      </span>
+                      <span className="text-neutral-400 dark:text-neutral-500 w-16 text-right">
+                        {formatNumber(item.pageviews)} pv
+                      </span>
+                    </div>
                   </div>
-                  <div className="col-span-2 truncate text-neutral-500 dark:text-neutral-400" title={item.medium}>
-                    {item.medium || EMPTY_LABEL}
-                  </div>
-                  <div className="col-span-2 truncate text-neutral-500 dark:text-neutral-400" title={item.campaign}>
-                    {item.campaign || EMPTY_LABEL}
-                  </div>
-                  <div className="col-span-2 text-right font-semibold text-neutral-900 dark:text-white">
-                    {formatNumber(item.visitors)}
-                  </div>
-                  <div className="col-span-2 text-right text-neutral-600 dark:text-neutral-400">
-                    {formatNumber(item.pageviews)}
-                  </div>
-                </div>
-              ))}
+                )
+              })}
             </>
           )}
         </div>

From 2acfd90bbd75987d15893e485ce0c61f9f3e5920 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 7 Mar 2026 00:01:24 +0100
Subject: [PATCH 21/28] style: move Campaigns to 2-col grid, show UTM details
 on second line

Pair Campaigns with Goals & Events in a half-width grid to avoid empty
space. Show medium and campaign on a visible second line under source
name instead of subtle inline text.
---
 app/sites/[id]/page.tsx            |  9 ++++----
 components/dashboard/Campaigns.tsx | 36 +++++++++++++++---------------
 2 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/app/sites/[id]/page.tsx b/app/sites/[id]/page.tsx
index 8644980..4c878d0 100644
--- a/app/sites/[id]/page.tsx
+++ b/app/sites/[id]/page.tsx
@@ -607,16 +607,15 @@ export default function SiteDashboardPage() {
         />
       </div>
 
-      {/* Campaigns Report */}
-      <div className="mb-8">
-        <Campaigns siteId={siteId} dateRange={dateRange} filters={filtersParam || undefined} onFilter={handleAddFilter} />
-      </div>
-
       <div className="grid gap-6 lg:grid-cols-2 mb-8">
+        <Campaigns siteId={siteId} dateRange={dateRange} filters={filtersParam || undefined} onFilter={handleAddFilter} />
         <GoalStats
           goalCounts={(goalsData?.goal_counts ?? []).filter(g => !/^scroll_\d+$/.test(g.event_name))}
           onSelectEvent={setSelectedEvent}
         />
+      </div>
+
+      <div className="mb-8">
         <ScrollDepth goalCounts={goalsData?.goal_counts ?? []} totalPageviews={stats.pageviews} />
       </div>
 
diff --git a/components/dashboard/Campaigns.tsx b/components/dashboard/Campaigns.tsx
index 33433a3..5ea0423 100644
--- a/components/dashboard/Campaigns.tsx
+++ b/components/dashboard/Campaigns.tsx
@@ -153,19 +153,19 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
                   <div
                     key={`${item.source}|${item.medium}|${item.campaign}`}
                     onClick={() => onFilter?.({ dimension: 'utm_source', operator: 'is', values: [item.source] })}
-                    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${onFilter ? ' cursor-pointer' : ''}`}
+                    className={`flex items-center justify-between py-1.5 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
                   >
-                    <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3 min-w-0">
+                    <div className="flex-1 text-neutral-900 dark:text-white flex items-center gap-3 min-w-0">
                       {renderSourceIcon(item.source)}
-                      <div className="truncate min-w-0">
-                        <span className="truncate font-medium" title={item.source}>
+                      <div className="min-w-0">
+                        <div className="truncate font-medium text-sm" title={item.source}>
                           {getReferrerDisplayName(item.source)}
-                        </span>
-                        {secondary && (
-                          <span className="text-neutral-400 dark:text-neutral-500 text-xs ml-1.5" title={secondary}>
-                            {secondary}
-                          </span>
-                        )}
+                        </div>
+                        <div className="flex items-center gap-1.5 text-xs text-neutral-400 dark:text-neutral-500">
+                          {item.medium && <span>{item.medium}</span>}
+                          {item.medium && item.campaign && <span>·</span>}
+                          {item.campaign && <span className="truncate">{item.campaign}</span>}
+                        </div>
                       </div>
                     </div>
                     <div className="flex items-center gap-2 ml-4">
@@ -245,17 +245,17 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
                     key={`${item.source}|${item.medium}|${item.campaign}`}
                     className="flex items-center justify-between py-2 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors"
                   >
-                    <div className="flex-1 truncate flex items-center gap-3 min-w-0">
+                    <div className="flex-1 flex items-center gap-3 min-w-0">
                       {renderSourceIcon(item.source)}
                       <div className="min-w-0">
-                        <span className="text-neutral-900 dark:text-white font-medium truncate" title={item.source}>
+                        <div className="text-neutral-900 dark:text-white font-medium truncate text-sm" title={item.source}>
                           {getReferrerDisplayName(item.source)}
-                        </span>
-                        {secondary && (
-                          <span className="text-neutral-400 dark:text-neutral-500 text-xs ml-1.5" title={secondary}>
-                            {secondary}
-                          </span>
-                        )}
+                        </div>
+                        <div className="flex items-center gap-1.5 text-xs text-neutral-400 dark:text-neutral-500">
+                          {item.medium && <span>{item.medium}</span>}
+                          {item.medium && item.campaign && <span>·</span>}
+                          {item.campaign && <span className="truncate">{item.campaign}</span>}
+                        </div>
                       </div>
                     </div>
                     <div className="flex items-center gap-4 ml-4 text-sm">

From dee708992588af53de7ac84770ce466fd6ca58bc Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 7 Mar 2026 00:20:21 +0100
Subject: [PATCH 22/28] style: always show UTM medium/campaign, clean up dead
 code

Show medium and campaign on every row with em-dash when empty so UTM
attributes are always visible. Remove unused getSecondaryLabel function.
---
 components/dashboard/Campaigns.tsx | 25 ++++++++-----------------
 1 file changed, 8 insertions(+), 17 deletions(-)

diff --git a/components/dashboard/Campaigns.tsx b/components/dashboard/Campaigns.tsx
index 5ea0423..defc79e 100644
--- a/components/dashboard/Campaigns.tsx
+++ b/components/dashboard/Campaigns.tsx
@@ -99,13 +99,6 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
     return <span className="text-lg flex-shrink-0">{getReferrerIcon(source)}</span>
   }
 
-  function getSecondaryLabel(item: CampaignStat): string | null {
-    const parts: string[] = []
-    if (item.medium) parts.push(item.medium)
-    if (item.campaign) parts.push(item.campaign)
-    return parts.length > 0 ? parts.join(' · ') : null
-  }
-
   const handleExportCampaigns = () => {
     const rows = sortedFullData.length > 0 ? sortedFullData : sortedData
     if (rows.length === 0) return
@@ -148,7 +141,6 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
           ) : hasData ? (
             <>
               {displayedData.map((item) => {
-                const secondary = getSecondaryLabel(item)
                 return (
                   <div
                     key={`${item.source}|${item.medium}|${item.campaign}`}
@@ -161,10 +153,10 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
                         <div className="truncate font-medium text-sm" title={item.source}>
                           {getReferrerDisplayName(item.source)}
                         </div>
-                        <div className="flex items-center gap-1.5 text-xs text-neutral-400 dark:text-neutral-500">
-                          {item.medium && <span>{item.medium}</span>}
-                          {item.medium && item.campaign && <span>·</span>}
-                          {item.campaign && <span className="truncate">{item.campaign}</span>}
+                        <div className="flex items-center gap-1.5 text-[11px] text-neutral-400 dark:text-neutral-500">
+                          <span>{item.medium || '—'}</span>
+                          <span>·</span>
+                          <span className="truncate">{item.campaign || '—'}</span>
                         </div>
                       </div>
                     </div>
@@ -239,7 +231,6 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
                 </button>
               </div>
               {sortedFullData.map((item) => {
-                const secondary = getSecondaryLabel(item)
                 return (
                   <div
                     key={`${item.source}|${item.medium}|${item.campaign}`}
@@ -251,10 +242,10 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
                         <div className="text-neutral-900 dark:text-white font-medium truncate text-sm" title={item.source}>
                           {getReferrerDisplayName(item.source)}
                         </div>
-                        <div className="flex items-center gap-1.5 text-xs text-neutral-400 dark:text-neutral-500">
-                          {item.medium && <span>{item.medium}</span>}
-                          {item.medium && item.campaign && <span>·</span>}
-                          {item.campaign && <span className="truncate">{item.campaign}</span>}
+                        <div className="flex items-center gap-1.5 text-[11px] text-neutral-400 dark:text-neutral-500">
+                          <span>{item.medium || '—'}</span>
+                          <span>·</span>
+                          <span className="truncate">{item.campaign || '—'}</span>
                         </div>
                       </div>
                     </div>

From 77dc61e7d09e54184c4187b5d7d681eaf0ddbded Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 7 Mar 2026 00:26:36 +0100
Subject: [PATCH 23/28] fix: round chart average label, update changelog

Fix formatAxisValue to show 1 decimal place for floats instead of raw
floating-point numbers. Update changelog with all UI improvements from
this session.
---
 CHANGELOG.md                   | 7 ++++++-
 components/dashboard/Chart.tsx | 5 +++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2f38e55..4ad3611 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,7 +6,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
-## [0.13.1-alpha] - 2026-03-06
+## [0.13.1-alpha] - 2026-03-07
 
 ### Added
 
@@ -17,6 +17,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 ### Improved
 
 - **Stronger filter pills.** Active filters now use solid brand-colored pills that are easy to spot in both light and dark mode. Click any pill to remove it.
+- **Campaigns panel redesigned.** Rebuilt from a wide table layout to a clean row-based design matching all other dashboard panels. UTM medium and campaign are always visible below the source name. Campaigns now sits in a half-width grid next to Goals & Events instead of taking the full width.
+- **Underline tab switchers.** Content, Locations, and Technology panels now use minimal underline tabs instead of pill-style switchers.
+- **"View all" moved to bottom of list.** The expand button on each panel is now a subtle "View all ›" link at the bottom of the data list instead of an icon in the header.
+- **Filter button uses filter icon.** The filter dropdown button now shows a funnel icon instead of a plus sign.
 
 ### Fixed
 
@@ -24,6 +28,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 - **Campaigns now respect your active filters.** Previously, the Campaigns panel ignored dashboard filters and always showed all campaigns. Now it filters along with everything else.
 - **Duplicate "Direct" entry removed from the referrer filter list.** The referrer suggestions no longer show "Direct" twice.
 - **Filter dropdowns now show all your data.** Previously, the filter value list only showed up to 10 items — so if you had 50 cities or 30 browsers, most were missing. Now up to 100 values are loaded when you open a filter, with a loading spinner while they're fetched.
+- **Chart average label no longer shows excessive decimals.** The "Avg" line label now displays one decimal place instead of raw floating-point numbers.
 
 ## [0.13.0-alpha] - 2026-03-02
 
diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index 792f2de..ae1ce06 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -166,8 +166,9 @@ function ChartTooltip({
 
 // * Compact Y-axis formatter: 1.5M, 12k, 99
 function formatAxisValue(value: number): string {
-  if (value >= 1e6) return `${value / 1e6}M`
-  if (value >= 1000) return `${value / 1000}k`
+  if (value >= 1e6) return `${+(value / 1e6).toFixed(1)}M`
+  if (value >= 1000) return `${+(value / 1000).toFixed(1)}k`
+  if (!Number.isInteger(value)) return value.toFixed(1)
   return String(value)
 }
 

From 641a3deebbd03d7e3d388969f3a66436cdb5dd65 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 7 Mar 2026 00:31:05 +0100
Subject: [PATCH 24/28] refactor: rebuild Chart component from scratch

- Remove sparklines from stat cards (redundant with main chart)
- Widen Y-axis to 40px, add allowDecimals=false for count metrics
- Move avg label from inside chart to toolbar badge
- Lighter grid lines, simpler gradient, thinner strokes
- Streamline toolbar: inline controls, icon-only export, no trailing separator
- Move live indicator from absolute to proper flow element
- Cleaner empty states without dashed border boxes
- Extract TrendBadge component, add tabular-nums for aligned numbers
---
 CHANGELOG.md                   |   4 +-
 components/dashboard/Chart.tsx | 628 ++++++++++++++-------------------
 2 files changed, 273 insertions(+), 359 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4ad3611..0275451 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 - **Underline tab switchers.** Content, Locations, and Technology panels now use minimal underline tabs instead of pill-style switchers.
 - **"View all" moved to bottom of list.** The expand button on each panel is now a subtle "View all ›" link at the bottom of the data list instead of an icon in the header.
 - **Filter button uses filter icon.** The filter dropdown button now shows a funnel icon instead of a plus sign.
+- **Chart component rebuilt from scratch.** Cleaner stat cards without sparklines, wider Y-axis that no longer clips labels, integer-only ticks for visitor/pageview counts, lighter grid lines, average moved to a subtle toolbar badge instead of overlapping the chart, streamlined toolbar with inline controls and icon-only export, and a properly positioned live indicator.
 
 ### Fixed
 
@@ -28,7 +29,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 - **Campaigns now respect your active filters.** Previously, the Campaigns panel ignored dashboard filters and always showed all campaigns. Now it filters along with everything else.
 - **Duplicate "Direct" entry removed from the referrer filter list.** The referrer suggestions no longer show "Direct" twice.
 - **Filter dropdowns now show all your data.** Previously, the filter value list only showed up to 10 items — so if you had 50 cities or 30 browsers, most were missing. Now up to 100 values are loaded when you open a filter, with a loading spinner while they're fetched.
-- **Chart average label no longer shows excessive decimals.** The "Avg" line label now displays one decimal place instead of raw floating-point numbers.
+- **Chart Y-axis no longer shows fractional visitors.** Count metrics (visitors, pageviews) now use integer-only ticks — no more "0.75 visitors".
+- **Chart average label no longer shows excessive decimals.** The average is now shown as a rounded value in a toolbar badge instead of a floating label inside the chart.
 
 ## [0.13.0-alpha] - 2026-03-02
 
diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index ae1ce06..48abf8f 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -14,8 +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 { ArrowUpRightIcon, ArrowDownRightIcon, BarChartIcon, Select, DownloadIcon } from '@ciphera-net/ui'
 import { Checkbox } from '@ciphera-net/ui'
 
 const COLORS = {
@@ -26,6 +25,7 @@ const COLORS = {
 
 const CHART_COLORS_LIGHT = {
   border: 'var(--color-neutral-200)',
+  grid: 'var(--color-neutral-100)',
   text: 'var(--color-neutral-900)',
   textMuted: 'var(--color-neutral-500)',
   axis: 'var(--color-neutral-400)',
@@ -35,6 +35,7 @@ const CHART_COLORS_LIGHT = {
 
 const CHART_COLORS_DARK = {
   border: 'var(--color-neutral-700)',
+  grid: 'var(--color-neutral-800)',
   text: 'var(--color-neutral-50)',
   textMuted: 'var(--color-neutral-400)',
   axis: 'var(--color-neutral-500)',
@@ -68,103 +69,14 @@ interface ChartProps {
   setTodayInterval: (interval: 'minute' | 'hour') => void
   multiDayInterval: 'hour' | 'day'
   setMultiDayInterval: (interval: 'hour' | 'day') => void
-  /** Optional: callback when user requests chart export (parent can open ExportModal or handle export) */
   onExportChart?: () => void
-  /** Optional: timestamp of last data fetch for "Live · Xs ago" indicator */
   lastUpdatedAt?: number | null
 }
 
 type MetricType = 'pageviews' | 'visitors' | 'bounce_rate' | 'avg_duration'
 
-// * Custom tooltip with comparison and theme-aware styling
-function ChartTooltip({
-  active,
-  payload,
-  label,
-  metric,
-  metricLabel,
-  formatNumberFn,
-  showComparison,
-  prevPeriodLabel,
-  colors,
-}: {
-  active?: boolean
-  payload?: Array<{ payload: { prevPageviews?: number; prevVisitors?: number; prevBounceRate?: number; prevAvgDuration?: number }; value: number }>
-  label?: string
-  metric: MetricType
-  metricLabel: string
-  formatNumberFn: (n: number) => string
-  showComparison: boolean
-  prevPeriodLabel?: string
-  colors: typeof CHART_COLORS_LIGHT
-}) {
-  if (!active || !payload?.length || !label) return null
-  // * Recharts sends one payload entry per Area; order can be [prevSeries, currentSeries].
-  // * Use the entry for the current metric so the tooltip shows today's value, not yesterday's.
-  type PayloadItem = { dataKey?: string; value?: number; payload: { prevPageviews?: number; prevVisitors?: number; prevBounceRate?: number; prevAvgDuration?: number; visitors?: number; pageviews?: number; bounce_rate?: number; avg_duration?: number } }
-  const items = payload as PayloadItem[]
-  const current = items.find((p) => p.dataKey === metric) ?? items[items.length - 1]
-  const value = Number(current?.value ?? (current?.payload as Record<string, number>)?.[metric] ?? 0)
-  
-  let prev: number | undefined
-  switch (metric) {
-    case 'visitors': prev = current?.payload?.prevVisitors; break;
-    case 'pageviews': prev = current?.payload?.prevPageviews; break;
-    case 'bounce_rate': prev = current?.payload?.prevBounceRate; break;
-    case 'avg_duration': prev = current?.payload?.prevAvgDuration; break;
-  }
+// ─── Helpers ─────────────────────────────────────────────────────────
 
-  const hasPrev = showComparison && prev != null
-  const delta =
-    hasPrev && (prev as number) > 0
-      ? Math.round(((value - (prev as number)) / (prev as number)) * 100)
-      : null
-
-  const formatValue = (v: number) => {
-    if (metric === 'bounce_rate') return `${Math.round(v)}%`
-    if (metric === 'avg_duration') return formatDuration(v)
-    return formatNumberFn(v)
-  }
-
-  return (
-    <div
-      className="rounded-lg border px-4 py-3 shadow-lg transition-shadow duration-300"
-      style={{
-        backgroundColor: colors.tooltipBg,
-        borderColor: colors.tooltipBorder,
-      }}
-    >
-      <div className="text-xs font-medium" style={{ color: colors.textMuted, marginBottom: 6 }}>
-        {label}
-      </div>
-      <div className="flex items-baseline gap-2">
-        <span className="text-base font-bold" style={{ color: colors.text }}>
-          {formatValue(value)}
-        </span>
-        <span className="text-xs" style={{ color: colors.textMuted }}>
-          {metricLabel}
-        </span>
-      </div>
-      {hasPrev && (
-        <div className="mt-1.5 flex items-center gap-2 text-xs" style={{ color: colors.textMuted }}>
-          <span>vs {formatValue(prev as number)} {prevPeriodLabel ? `(${prevPeriodLabel})` : 'prev'}</span>
-          {delta !== null && (
-            <span
-              className="font-medium"
-              style={{
-                color: delta > 0 ? (metric === 'bounce_rate' ? COLORS.danger : COLORS.success) : delta < 0 ? (metric === 'bounce_rate' ? COLORS.success : COLORS.danger) : colors.textMuted,
-              }}
-            >
-              {delta > 0 ? '+' : ''}{delta}%
-            </span>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}
-
-// * Compact Y-axis formatter: 1.5M, 12k, 99
 function formatAxisValue(value: number): string {
   if (value >= 1e6) return `${+(value / 1e6).toFixed(1)}M`
   if (value >= 1000) return `${+(value / 1000).toFixed(1)}k`
@@ -172,16 +84,21 @@ function formatAxisValue(value: number): string {
   return String(value)
 }
 
-// * Compact duration for Y-axis ticks (avoids truncation: "5m" not "5m 0s")
 function formatAxisDuration(seconds: number): string {
   if (!seconds) return '0s'
   const m = Math.floor(seconds / 60)
   const s = Math.floor(seconds % 60)
-  if (m > 0) return s > 0 ? `${m}m ${s}s` : `${m}m`
+  if (m > 0) return s > 0 ? `${m}m${s}s` : `${m}m`
   return `${s}s`
 }
 
-// * Returns human-readable label for the previous comparison period (e.g. "Feb 10" or "Jan 5 – Feb 4")
+function formatAvgLabel(value: number, metric: MetricType): string {
+  if (metric === 'bounce_rate') return `${Math.round(value)}%`
+  if (metric === 'avg_duration') return formatAxisDuration(value)
+  if (metric === 'visitors' || metric === 'pageviews') return formatAxisValue(Math.round(value))
+  return formatAxisValue(value)
+}
+
 function getPrevDateRangeLabel(dateRange: { start: string; end: string }): string {
   const startDate = new Date(dateRange.start)
   const endDate = new Date(dateRange.end)
@@ -198,7 +115,6 @@ function getPrevDateRangeLabel(dateRange: { start: string; end: string }): strin
   return `${fmt(prevStart)} – ${fmt(prevEnd)}`
 }
 
-// * Returns short trend context (e.g. "vs yesterday", "vs previous 7 days")
 function getTrendContext(dateRange: { start: string; end: string }): string {
   const startDate = new Date(dateRange.start)
   const endDate = new Date(dateRange.end)
@@ -210,11 +126,88 @@ function getTrendContext(dateRange: { start: string; end: string }): string {
   return `vs previous ${days} days`
 }
 
-export default function Chart({ 
-  data, 
-  prevData, 
-  stats, 
-  prevStats, 
+// ─── Tooltip ─────────────────────────────────────────────────────────
+
+function ChartTooltip({
+  active,
+  payload,
+  label,
+  metric,
+  metricLabel,
+  formatNumberFn,
+  showComparison,
+  prevPeriodLabel,
+  colors,
+}: {
+  active?: boolean
+  payload?: Array<{ payload: Record<string, number>; value: number; dataKey?: string }>
+  label?: string
+  metric: MetricType
+  metricLabel: string
+  formatNumberFn: (n: number) => string
+  showComparison: boolean
+  prevPeriodLabel?: string
+  colors: typeof CHART_COLORS_LIGHT
+}) {
+  if (!active || !payload?.length || !label) return null
+
+  const current = payload.find((p) => p.dataKey === metric) ?? payload[payload.length - 1]
+  const value = Number(current?.value ?? current?.payload?.[metric] ?? 0)
+
+  const prevKey = metric === 'visitors' ? 'prevVisitors' : metric === 'pageviews' ? 'prevPageviews' : metric === 'bounce_rate' ? 'prevBounceRate' : 'prevAvgDuration'
+  const prev = current?.payload?.[prevKey]
+
+  const hasPrev = showComparison && prev != null
+  const delta = hasPrev && prev > 0 ? Math.round(((value - prev) / prev) * 100) : null
+
+  const formatValue = (v: number) => {
+    if (metric === 'bounce_rate') return `${Math.round(v)}%`
+    if (metric === 'avg_duration') return formatDuration(v)
+    return formatNumberFn(v)
+  }
+
+  return (
+    <div
+      className="rounded-lg border px-3.5 py-2.5 shadow-lg"
+      style={{ backgroundColor: colors.tooltipBg, borderColor: colors.tooltipBorder }}
+    >
+      <div className="text-[11px] font-medium mb-1" style={{ color: colors.textMuted }}>
+        {label}
+      </div>
+      <div className="flex items-baseline gap-1.5">
+        <span className="text-sm font-bold" style={{ color: colors.text }}>
+          {formatValue(value)}
+        </span>
+        <span className="text-[11px]" style={{ color: colors.textMuted }}>
+          {metricLabel}
+        </span>
+      </div>
+      {hasPrev && (
+        <div className="mt-1 flex items-center gap-1.5 text-[11px]" style={{ color: colors.textMuted }}>
+          <span>vs {formatValue(prev)} {prevPeriodLabel ? `(${prevPeriodLabel})` : ''}</span>
+          {delta !== null && (
+            <span
+              className="font-medium"
+              style={{
+                color: delta > 0 ? (metric === 'bounce_rate' ? COLORS.danger : COLORS.success) : delta < 0 ? (metric === 'bounce_rate' ? COLORS.success : COLORS.danger) : colors.textMuted,
+              }}
+            >
+              {delta > 0 ? '+' : ''}{delta}%
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ─── Chart Component ─────────────────────────────────────────────────
+
+export default function Chart({
+  data,
+  prevData,
+  stats,
+  prevStats,
   interval,
   dateRange,
   todayInterval,
@@ -230,10 +223,7 @@ export default function Chart({
   const { resolvedTheme } = useTheme()
 
   const handleExportChart = useCallback(async () => {
-    if (onExportChart) {
-      onExportChart()
-      return
-    }
+    if (onExportChart) { onExportChart(); return }
     if (!chartContainerRef.current) return
     try {
       const { toPng } = await import('html-to-image')
@@ -245,9 +235,7 @@ export default function Chart({
       link.download = `chart-${dateRange.start}-${dateRange.end}.png`
       link.href = dataUrl
       link.click()
-    } catch {
-      // Fallback: do nothing if export fails
-    }
+    } catch { /* noop */ }
   }, [onExportChart, dateRange, resolvedTheme])
 
   const colors = useMemo(
@@ -255,27 +243,24 @@ export default function Chart({
     [resolvedTheme]
   )
 
-  // * Align current and previous data
+  // ─── Data ──────────────────────────────────────────────────────────
+
   const chartData = data.map((item, i) => {
-    // * Try to find matching previous item (assuming same length/order)
-    // * For more robustness, we could match by relative index
     const prevItem = prevData?.[i]
-    
-    // * Format date based on interval
+
     let formattedDate: string
     if (interval === 'minute') {
       formattedDate = new Date(item.date).toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })
     } else if (interval === 'hour') {
       const d = new Date(item.date)
       const isMidnight = d.getHours() === 0 && d.getMinutes() === 0
-      // * At 12:00 AM: date only (used for X-axis ticks). Non-midnight: date + time for tooltip only.
       formattedDate = isMidnight
         ? d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) + ' 12:00 AM'
         : d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) + ', ' + d.toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric' })
     } else {
       formattedDate = new Date(item.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
     }
-    
+
     return {
       date: formattedDate,
       originalDate: item.date,
@@ -290,7 +275,8 @@ export default function Chart({
     }
   })
 
-  // * Calculate trends
+  // ─── Metrics ───────────────────────────────────────────────────────
+
   const calculateTrend = (current: number, previous?: number) => {
     if (!previous) return null
     if (previous === 0) return current > 0 ? 100 : 0
@@ -298,282 +284,210 @@ export default function Chart({
   }
 
   const metrics = [
-    {
-      id: 'visitors',
-      label: 'Unique Visitors',
-      value: formatNumber(stats.visitors),
-      trend: calculateTrend(stats.visitors, prevStats?.visitors),
-      color: COLORS.brand,
-      invertTrend: false,
-    },
-    {
-      id: 'pageviews',
-      label: 'Total Pageviews',
-      value: formatNumber(stats.pageviews),
-      trend: calculateTrend(stats.pageviews, prevStats?.pageviews),
-      color: COLORS.brand,
-      invertTrend: false,
-    },
-    {
-      id: 'bounce_rate',
-      label: 'Bounce Rate',
-      value: `${Math.round(stats.bounce_rate)}%`,
-      trend: calculateTrend(stats.bounce_rate, prevStats?.bounce_rate),
-      color: COLORS.brand,
-      invertTrend: true, // Lower bounce rate is better
-    },
-    {
-      id: 'avg_duration',
-      label: 'Visit Duration',
-      value: formatDuration(stats.avg_duration),
-      trend: calculateTrend(stats.avg_duration, prevStats?.avg_duration),
-      color: COLORS.brand,
-      invertTrend: false,
-    },
-  ] as const
+    { id: 'visitors' as const, label: 'Unique Visitors', value: formatNumber(stats.visitors), trend: calculateTrend(stats.visitors, prevStats?.visitors), invertTrend: false },
+    { id: 'pageviews' as const, label: 'Total Pageviews', value: formatNumber(stats.pageviews), trend: calculateTrend(stats.pageviews, prevStats?.pageviews), invertTrend: false },
+    { id: 'bounce_rate' as const, label: 'Bounce Rate', value: `${Math.round(stats.bounce_rate)}%`, trend: calculateTrend(stats.bounce_rate, prevStats?.bounce_rate), invertTrend: true },
+    { id: 'avg_duration' as const, label: 'Visit Duration', value: formatDuration(stats.avg_duration), trend: calculateTrend(stats.avg_duration, prevStats?.avg_duration), invertTrend: false },
+  ]
 
   const activeMetric = metrics.find((m) => m.id === metric) || metrics[0]
-  const chartMetric = metric
-  const metricLabel = metrics.find(m => m.id === metric)?.label || 'visitors'
+  const metricLabel = activeMetric.label
   const prevPeriodLabel = prevData?.length ? getPrevDateRangeLabel(dateRange) : ''
   const trendContext = getTrendContext(dateRange)
 
   const avg = chartData.length
-    ? chartData.reduce((s, d) => s + (d[chartMetric] as number), 0) / chartData.length
+    ? chartData.reduce((s, d) => s + (d[metric] as number), 0) / chartData.length
     : 0
 
   const hasPrev = !!(prevData?.length && showComparison)
   const hasData = data.length > 0
-  const hasAnyNonZero = hasData && chartData.some((d) => (d[chartMetric] as number) > 0)
+  const hasAnyNonZero = hasData && chartData.some((d) => (d[metric] as number) > 0)
 
-  // * In hourly view, only show X-axis labels at 12:00 AM (date + 12:00 AM).
-  const midnightTicks =
-    interval === 'hour'
-      ? (() => {
-          const t = chartData
-            .filter((_, i) => {
-              const d = new Date(data[i].date)
-              return d.getHours() === 0 && d.getMinutes() === 0
-            })
-            .map((c) => c.date)
-          return t.length > 0 ? t : undefined
-        })()
-      : undefined
+  // Count metrics should never show decimal Y-axis ticks
+  const isCountMetric = metric === 'visitors' || metric === 'pageviews'
+
+  // ─── X-Axis Ticks ─────────────────────────────────────────────────
+
+  const midnightTicks = interval === 'hour'
+    ? (() => {
+        const t = chartData
+          .filter((_, i) => { const d = new Date(data[i].date); return d.getHours() === 0 && d.getMinutes() === 0 })
+          .map((c) => c.date)
+        return t.length > 0 ? t : undefined
+      })()
+    : undefined
 
-  // * In daily view, only show the date at each day (12:00 AM / start-of-day mark), no time.
   const dayTicks = interval === 'day' && chartData.length > 0 ? chartData.map((c) => c.date) : undefined
 
+  // ─── Trend Badge ──────────────────────────────────────────────────
+
+  function TrendBadge({ trend, invert }: { trend: number | null; invert: boolean }) {
+    if (trend === null) return <span className="text-neutral-400 dark:text-neutral-500">—</span>
+    const effective = invert ? -trend : trend
+    const isPositive = effective > 0
+    const isNegative = effective < 0
+    return (
+      <span className={`inline-flex items-center text-xs font-medium ${isPositive ? 'text-emerald-600 dark:text-emerald-400' : isNegative ? 'text-red-500 dark:text-red-400' : 'text-neutral-400'}`}>
+        {isPositive ? <ArrowUpRightIcon className="w-3 h-3 mr-0.5" /> : isNegative ? <ArrowDownRightIcon className="w-3 h-3 mr-0.5" /> : null}
+        {Math.abs(trend)}%
+      </span>
+    )
+  }
+
+  // ─── Render ────────────────────────────────────────────────────────
+
   return (
     <div
       ref={chartContainerRef}
-      className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden shadow-sm relative"
+      className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden relative"
       role="region"
       aria-label={`Analytics chart showing ${metricLabel} over time`}
     >
-      {/* * Subtle live/updated indicator in bottom-right corner */}
-      {lastUpdatedAt != null && (
-        <div
-          className="absolute bottom-3 right-6 flex items-center gap-2 text-xs text-neutral-500 dark:text-neutral-400 pointer-events-none"
-          title="Data refreshes every 30 seconds"
-        >
-          <span className="relative flex h-1.5 w-1.5">
-            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75" />
-            <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-green-500" />
-          </span>
-          Live · {formatUpdatedAgo(lastUpdatedAt)}
-        </div>
-      )}
-      {/* Stats Header (Interactive Tabs) */}
+      {/* Stat Cards */}
       <div className="grid grid-cols-2 md:grid-cols-4 divide-x divide-neutral-200 dark:divide-neutral-800 border-b border-neutral-200 dark:border-neutral-800">
-        {metrics.map((item) => (
-          <button
-            key={item.id}
-            type="button"
-            onClick={() => setMetric(item.id as MetricType)}
-            aria-pressed={metric === item.id}
-            aria-label={`Show ${item.label} chart`}
-            className={`
-              p-4 sm:p-6 text-left transition-colors relative group
-              hover:bg-neutral-50 dark:hover:bg-neutral-800/50
-              ${metric === item.id ? 'bg-neutral-50 dark:bg-neutral-800/50' : ''}
-              cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-orange-500 focus-visible:ring-offset-2
-            `}
-          >
-            <div className={`text-xs font-semibold uppercase tracking-wider mb-1 flex items-center gap-2 ${metric === item.id ? 'text-neutral-900 dark:text-white' : 'text-neutral-500'}`}>
-              {item.label}
-            </div>
-            <div className="flex items-baseline gap-2 flex-wrap">
-              <span className="text-xl sm:text-2xl font-bold text-neutral-900 dark:text-white">
-                {item.value}
-              </span>
-              <span className="flex items-center text-sm font-medium">
-                {item.trend !== null ? (
-                  <>
-                    <span className={
-                      (item.invertTrend ? -item.trend : item.trend) > 0 
-                        ? 'text-emerald-600 dark:text-emerald-500' 
-                        : (item.invertTrend ? -item.trend : item.trend) < 0 
-                          ? 'text-red-600 dark:text-red-500' 
-                          : 'text-neutral-500'
-                    }>
-                      {(item.invertTrend ? -item.trend : item.trend) > 0 ? (
-                        <ArrowUpRightIcon className="w-3 h-3 mr-0.5 inline" />
-                      ) : (item.invertTrend ? -item.trend : item.trend) < 0 ? (
-                        <ArrowDownRightIcon className="w-3 h-3 mr-0.5 inline" />
-                      ) : null}
-                      {Math.abs(item.trend)}%
-                    </span>
-                  </>
-                ) : (
-                  <span className="text-neutral-500 dark:text-neutral-400">—</span>
-                )}
-              </span>
-            </div>
-            <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">{trendContext}</p>
-            {hasData && (
-              <div className="mt-2">
-                <Sparkline data={chartData} dataKey={item.id} color={item.color} />
+        {metrics.map((item) => {
+          const isActive = metric === item.id
+          return (
+            <button
+              key={item.id}
+              type="button"
+              onClick={() => setMetric(item.id)}
+              aria-pressed={isActive}
+              aria-label={`Show ${item.label} chart`}
+              className={`p-4 sm:px-6 sm:py-5 text-left transition-colors relative cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange/50 ${isActive ? 'bg-neutral-50 dark:bg-neutral-800/40' : 'hover:bg-neutral-50/50 dark:hover:bg-neutral-800/20'}`}
+            >
+              <div className={`text-[11px] font-semibold uppercase tracking-wider mb-1.5 ${isActive ? 'text-neutral-900 dark:text-white' : 'text-neutral-400 dark:text-neutral-500'}`}>
+                {item.label}
               </div>
-            )}
-            {metric === item.id && (
-               <div className="absolute bottom-0 left-0 right-0 h-1" style={{ backgroundColor: item.color }} />
-            )}
-          </button>
-        ))}
+              <div className="flex items-baseline gap-2">
+                <span className="text-xl sm:text-2xl font-bold text-neutral-900 dark:text-white tabular-nums">
+                  {item.value}
+                </span>
+                <TrendBadge trend={item.trend} invert={item.invertTrend} />
+              </div>
+              <p className="text-[11px] text-neutral-400 dark:text-neutral-500 mt-0.5">{trendContext}</p>
+              {isActive && (
+                <div className="absolute bottom-0 left-0 right-0 h-[3px] bg-brand-orange" />
+              )}
+            </button>
+          )
+        })}
       </div>
 
       {/* Chart Area */}
-      <div className="p-6">
-        {/* Toolbar Row */}
-        <div className="mb-6 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
-          {/* Left side: Legend */}
-          <div className="flex items-center">
+      <div className="px-4 sm:px-6 pt-4 pb-2">
+        {/* Toolbar */}
+        <div className="flex items-center justify-between gap-3 mb-4">
+          {/* Left: metric label + avg badge */}
+          <div className="flex items-center gap-3">
+            <span className="text-xs font-medium text-neutral-500 dark:text-neutral-400">
+              {metricLabel}
+            </span>
+            {hasAnyNonZero && avg > 0 && (
+              <span className="text-[11px] font-medium text-neutral-400 dark:text-neutral-500 bg-neutral-100 dark:bg-neutral-800 px-2 py-0.5 rounded-full">
+                Avg: {formatAvgLabel(avg, metric)}
+              </span>
+            )}
             {hasPrev && (
-              <div className="flex items-center gap-4 text-xs font-medium" style={{ color: colors.textMuted }}>
-                <span className="flex items-center gap-2">
-                  <span
-                    className="h-2 w-2 rounded-full"
-                    style={{ backgroundColor: activeMetric.color }}
-                  />
+              <div className="hidden sm:flex items-center gap-3 text-[11px] font-medium text-neutral-400 dark:text-neutral-500 ml-2">
+                <span className="flex items-center gap-1.5">
+                  <span className="h-1.5 w-1.5 rounded-full bg-brand-orange" />
                   Current
                 </span>
-                <span className="flex items-center gap-2">
-                  <span
-                    className="h-2 w-2 rounded-full border border-dashed"
-                    style={{ borderColor: colors.axis }}
-                  />
+                <span className="flex items-center gap-1.5">
+                  <span className="h-1.5 w-1.5 rounded-full border border-dashed" style={{ borderColor: colors.axis }} />
                   Previous{prevPeriodLabel ? ` (${prevPeriodLabel})` : ''}
                 </span>
               </div>
             )}
           </div>
 
-          {/* Right side: Controls */}
-          <div className="flex flex-wrap items-center gap-3 self-end sm:self-auto">
-            <div className="flex items-center gap-2">
-              <span className="text-xs text-neutral-500 dark:text-neutral-400">Group by:</span>
-              {dateRange.start === dateRange.end && (
-                <Select
-                  value={todayInterval}
-                  onChange={(value) => setTodayInterval(value as 'minute' | 'hour')}
-                  options={[
-                    { value: 'minute', label: '1 min' },
-                    { value: 'hour', label: '1 hour' },
-                  ]}
-                  className="min-w-[100px]"
-                />
-              )}
-              {dateRange.start !== dateRange.end && (
-                <Select
-                  value={multiDayInterval}
-                  onChange={(value) => setMultiDayInterval(value as 'hour' | 'day')}
-                  options={[
-                    { value: 'hour', label: '1 hour' },
-                    { value: 'day', label: '1 day' },
-                  ]}
-                  className="min-w-[100px]"
-                />
-              )}
-            </div>
+          {/* Right: controls */}
+          <div className="flex items-center gap-2">
+            {dateRange.start === dateRange.end ? (
+              <Select
+                value={todayInterval}
+                onChange={(value) => setTodayInterval(value as 'minute' | 'hour')}
+                options={[
+                  { value: 'minute', label: '1 min' },
+                  { value: 'hour', label: '1 hour' },
+                ]}
+                className="min-w-[90px]"
+              />
+            ) : (
+              <Select
+                value={multiDayInterval}
+                onChange={(value) => setMultiDayInterval(value as 'hour' | 'day')}
+                options={[
+                  { value: 'hour', label: '1 hour' },
+                  { value: 'day', label: '1 day' },
+                ]}
+                className="min-w-[90px]"
+              />
+            )}
 
             {prevData?.length ? (
-              <div className="flex flex-col gap-1">
-                <Checkbox
-                  checked={showComparison}
-                  onCheckedChange={setShowComparison}
-                  label="Compare"
-                />
-                {showComparison && prevPeriodLabel && (
-                  <span className="text-xs text-neutral-500 dark:text-neutral-400">
-                    ({prevPeriodLabel})
-                  </span>
-                )}
-              </div>
+              <Checkbox
+                checked={showComparison}
+                onCheckedChange={setShowComparison}
+                label="Compare"
+              />
             ) : null}
 
-            <Button
-              variant="ghost"
+            <button
               onClick={handleExportChart}
               disabled={!hasData}
-              className="gap-2 py-1.5 px-3 text-sm text-neutral-600 dark:text-neutral-400"
+              className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors disabled:opacity-30 cursor-pointer"
+              title="Export chart as PNG"
             >
               <DownloadIcon className="w-4 h-4" />
-              Export chart
-            </Button>
-
-            {/* Vertical Separator */}
-            <div className="h-4 w-px bg-neutral-200 dark:bg-neutral-800" />
+            </button>
           </div>
         </div>
 
         {!hasData ? (
-          <div className="flex h-80 flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-neutral-200 dark:border-neutral-700 bg-neutral-50/50 dark:bg-neutral-800/30">
-            <BarChartIcon className="h-12 w-12 text-neutral-300 dark:text-neutral-600" aria-hidden />
-            <p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
-              No data for this period
-            </p>
-            <p className="text-xs text-neutral-400 dark:text-neutral-500">Try a different date range</p>
+          <div className="flex h-72 flex-col items-center justify-center gap-2">
+            <BarChartIcon className="h-10 w-10 text-neutral-200 dark:text-neutral-700" aria-hidden />
+            <p className="text-sm text-neutral-400 dark:text-neutral-500">No data for this period</p>
           </div>
         ) : !hasAnyNonZero ? (
-          <div className="flex h-80 flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-neutral-200 dark:border-neutral-700 bg-neutral-50/50 dark:bg-neutral-800/30">
-            <BarChartIcon className="h-12 w-12 text-neutral-300 dark:text-neutral-600" aria-hidden />
-            <p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
-              No {metricLabel.toLowerCase()} data for this period
-            </p>
-            <p className="text-xs text-neutral-400 dark:text-neutral-500">Try selecting another metric or date range</p>
+          <div className="flex h-72 flex-col items-center justify-center gap-2">
+            <BarChartIcon className="h-10 w-10 text-neutral-200 dark:text-neutral-700" aria-hidden />
+            <p className="text-sm text-neutral-400 dark:text-neutral-500">No {metricLabel.toLowerCase()} recorded</p>
           </div>
         ) : (
-          <div className="h-[360px] w-full flex flex-col">
-            <div className="text-xs font-medium mb-1 flex-shrink-0" style={{ color: colors.axis }}>
-              {metricLabel}
-            </div>
-            <div className="flex-1 min-h-0 w-full">
-              <ResponsiveContainer width="100%" height="100%">
-                <AreaChart data={chartData} margin={{ top: 4, right: 8, left: 24, bottom: 24 }}>
+          <div className="h-[320px] w-full">
+            <ResponsiveContainer width="100%" height="100%">
+              <AreaChart data={chartData} margin={{ top: 8, right: 8, left: 0, bottom: 8 }}>
                 <defs>
                   <linearGradient id={`gradient-${metric}`} x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="0%" stopColor={activeMetric.color} stopOpacity={0.35} />
-                    <stop offset="50%" stopColor={activeMetric.color} stopOpacity={0.12} />
-                    <stop offset="100%" stopColor={activeMetric.color} stopOpacity={0} />
+                    <stop offset="0%" stopColor={COLORS.brand} stopOpacity={0.25} />
+                    <stop offset="100%" stopColor={COLORS.brand} stopOpacity={0} />
                   </linearGradient>
                 </defs>
-                <CartesianGrid strokeDasharray="3 3" vertical={false} stroke={colors.border} />
+                <CartesianGrid
+                  strokeDasharray="3 3"
+                  vertical={false}
+                  stroke={colors.grid}
+                />
                 <XAxis
                   dataKey="date"
                   stroke={colors.axis}
-                  fontSize={12}
+                  fontSize={11}
                   tickLine={false}
                   axisLine={false}
-                  minTickGap={28}
+                  minTickGap={40}
                   ticks={midnightTicks ?? dayTicks}
+                  dy={8}
                 />
                 <YAxis
                   stroke={colors.axis}
-                  fontSize={12}
+                  fontSize={11}
                   tickLine={false}
                   axisLine={false}
                   domain={[0, 'auto']}
-                  width={24}
+                  width={40}
+                  allowDecimals={!isCountMetric}
                   tickFormatter={(val) => {
                     if (metric === 'bounce_rate') return `${val}%`
                     if (metric === 'avg_duration') return formatAxisDuration(val)
@@ -584,12 +498,9 @@ export default function Chart({
                   content={(p: TooltipProps<number, string>) => (
                     <ChartTooltip
                       active={p.active}
-                      payload={p.payload as Array<{
-                        payload: { prevPageviews?: number; prevVisitors?: number }
-                        value: number
-                      }>}
+                      payload={p.payload as Array<{ payload: Record<string, number>; value: number; dataKey?: string }>}
                       label={p.label as string}
-                      metric={chartMetric}
+                      metric={metric}
                       metricLabel={metricLabel}
                       formatNumberFn={formatNumber}
                       showComparison={hasPrev}
@@ -597,7 +508,7 @@ export default function Chart({
                       colors={colors}
                     />
                   )}
-                  cursor={{ stroke: activeMetric.color, strokeDasharray: '4 4', strokeWidth: 1 }}
+                  cursor={{ stroke: colors.axis, strokeOpacity: 0.3, strokeWidth: 1 }}
                 />
 
                 {avg > 0 && (
@@ -605,34 +516,23 @@ export default function Chart({
                     y={avg}
                     stroke={colors.axis}
                     strokeDasharray="4 4"
-                    strokeOpacity={0.7}
-                    label={{
-                      value: `Avg: ${metric === 'bounce_rate' ? `${Math.round(avg)}%` : metric === 'avg_duration' ? formatAxisDuration(avg) : formatAxisValue(avg)}`,
-                      position: 'insideTopRight',
-                      fill: colors.axis,
-                      fontSize: 11,
-                    }}
+                    strokeOpacity={0.4}
                   />
                 )}
 
                 {hasPrev && (
                   <Area
                     type="monotone"
-                    dataKey={
-                      chartMetric === 'visitors' ? 'prevVisitors' : 
-                      chartMetric === 'pageviews' ? 'prevPageviews' :
-                      chartMetric === 'bounce_rate' ? 'prevBounceRate' :
-                      'prevAvgDuration'
-                    }
+                    dataKey={metric === 'visitors' ? 'prevVisitors' : metric === 'pageviews' ? 'prevPageviews' : metric === 'bounce_rate' ? 'prevBounceRate' : 'prevAvgDuration'}
                     stroke={colors.axis}
-                    strokeWidth={2}
-                    strokeDasharray="5 5"
+                    strokeWidth={1.5}
+                    strokeDasharray="4 4"
                     strokeLinecap="round"
                     strokeLinejoin="round"
                     fill="none"
                     dot={false}
                     isAnimationActive
-                    animationDuration={500}
+                    animationDuration={400}
                     animationEasing="ease-out"
                   />
                 )}
@@ -640,30 +540,42 @@ export default function Chart({
                 <Area
                   type="monotone"
                   baseValue={0}
-                  dataKey={chartMetric}
-                  stroke={activeMetric.color}
-                  strokeWidth={2.5}
+                  dataKey={metric}
+                  stroke={COLORS.brand}
+                  strokeWidth={2}
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   fillOpacity={1}
                   fill={`url(#gradient-${metric})`}
                   dot={false}
                   activeDot={{
-                    r: 5,
+                    r: 4,
                     strokeWidth: 2,
-                    fill: resolvedTheme === 'dark' ? 'var(--color-neutral-800)' : '#ffffff',
-                    stroke: activeMetric.color,
+                    fill: resolvedTheme === 'dark' ? 'var(--color-neutral-900)' : '#ffffff',
+                    stroke: COLORS.brand,
                   }}
                   isAnimationActive
-                  animationDuration={500}
+                  animationDuration={400}
                   animationEasing="ease-out"
                 />
-                </AreaChart>
-              </ResponsiveContainer>
-            </div>
+              </AreaChart>
+            </ResponsiveContainer>
           </div>
         )}
       </div>
+
+      {/* Live indicator */}
+      {lastUpdatedAt != null && (
+        <div className="px-4 sm:px-6 pb-3 flex justify-end">
+          <div className="flex items-center gap-1.5 text-[11px] text-neutral-400 dark:text-neutral-500">
+            <span className="relative flex h-1.5 w-1.5">
+              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75" />
+              <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-green-500" />
+            </span>
+            Live · {formatUpdatedAgo(lastUpdatedAt)}
+          </div>
+        </div>
+      )}
     </div>
   )
 }

From 74ee64a560f245c0ccd0eb691536fe6a732c354a Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 7 Mar 2026 00:50:53 +0100
Subject: [PATCH 25/28] fix: remove tabular-nums causing font fallback on KPI
 numbers

Plus Jakarta Sans doesn't fully support the tnum OpenType feature,
causing browsers to fall back to system fonts for numeric glyphs.
---
 components/dashboard/Chart.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index 48abf8f..ad857e6 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -360,7 +360,7 @@ export default function Chart({
                 {item.label}
               </div>
               <div className="flex items-baseline gap-2">
-                <span className="text-xl sm:text-2xl font-bold text-neutral-900 dark:text-white tabular-nums">
+                <span className="text-xl sm:text-2xl font-bold text-neutral-900 dark:text-white">
                   {item.value}
                 </span>
                 <TrendBadge trend={item.trend} invert={item.invertTrend} />

From ece8cda33458309bad072c0c982fed0438f2bc30 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 7 Mar 2026 00:54:11 +0100
Subject: [PATCH 26/28] style: remove avg reference line and badge from chart

Remove the dashed average line from the chart area and the Avg badge
from the toolbar for a cleaner look.
---
 components/dashboard/Chart.tsx | 25 -------------------------
 1 file changed, 25 deletions(-)

diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index ad857e6..3af6270 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -10,7 +10,6 @@ import {
   CartesianGrid,
   Tooltip,
   ResponsiveContainer,
-  ReferenceLine,
 } from 'recharts'
 import type { TooltipProps } from 'recharts'
 import { formatNumber, formatDuration, formatUpdatedAgo } from '@ciphera-net/ui'
@@ -92,13 +91,6 @@ function formatAxisDuration(seconds: number): string {
   return `${s}s`
 }
 
-function formatAvgLabel(value: number, metric: MetricType): string {
-  if (metric === 'bounce_rate') return `${Math.round(value)}%`
-  if (metric === 'avg_duration') return formatAxisDuration(value)
-  if (metric === 'visitors' || metric === 'pageviews') return formatAxisValue(Math.round(value))
-  return formatAxisValue(value)
-}
-
 function getPrevDateRangeLabel(dateRange: { start: string; end: string }): string {
   const startDate = new Date(dateRange.start)
   const endDate = new Date(dateRange.end)
@@ -295,10 +287,6 @@ export default function Chart({
   const prevPeriodLabel = prevData?.length ? getPrevDateRangeLabel(dateRange) : ''
   const trendContext = getTrendContext(dateRange)
 
-  const avg = chartData.length
-    ? chartData.reduce((s, d) => s + (d[metric] as number), 0) / chartData.length
-    : 0
-
   const hasPrev = !!(prevData?.length && showComparison)
   const hasData = data.length > 0
   const hasAnyNonZero = hasData && chartData.some((d) => (d[metric] as number) > 0)
@@ -383,11 +371,6 @@ export default function Chart({
             <span className="text-xs font-medium text-neutral-500 dark:text-neutral-400">
               {metricLabel}
             </span>
-            {hasAnyNonZero && avg > 0 && (
-              <span className="text-[11px] font-medium text-neutral-400 dark:text-neutral-500 bg-neutral-100 dark:bg-neutral-800 px-2 py-0.5 rounded-full">
-                Avg: {formatAvgLabel(avg, metric)}
-              </span>
-            )}
             {hasPrev && (
               <div className="hidden sm:flex items-center gap-3 text-[11px] font-medium text-neutral-400 dark:text-neutral-500 ml-2">
                 <span className="flex items-center gap-1.5">
@@ -511,14 +494,6 @@ export default function Chart({
                   cursor={{ stroke: colors.axis, strokeOpacity: 0.3, strokeWidth: 1 }}
                 />
 
-                {avg > 0 && (
-                  <ReferenceLine
-                    y={avg}
-                    stroke={colors.axis}
-                    strokeDasharray="4 4"
-                    strokeOpacity={0.4}
-                  />
-                )}
 
                 {hasPrev && (
                   <Area

From dd8e101f699da67d6de76cb88360384d020a9186 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 7 Mar 2026 00:56:22 +0100
Subject: [PATCH 27/28] fix: resolve CSS var for chart PNG export background
 color

html-to-image cannot resolve CSS custom properties. Use
getComputedStyle to get the actual background color from the DOM.
---
 components/dashboard/Chart.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index 3af6270..9c3701f 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -219,9 +219,11 @@ export default function Chart({
     if (!chartContainerRef.current) return
     try {
       const { toPng } = await import('html-to-image')
+      // Resolve the actual background color from the DOM (CSS vars don't work in html-to-image)
+      const bg = getComputedStyle(chartContainerRef.current).backgroundColor || (resolvedTheme === 'dark' ? '#171717' : '#ffffff')
       const dataUrl = await toPng(chartContainerRef.current, {
         cacheBust: true,
-        backgroundColor: resolvedTheme === 'dark' ? 'var(--color-neutral-900)' : '#ffffff',
+        backgroundColor: bg,
       })
       const link = document.createElement('a')
       link.download = `chart-${dateRange.start}-${dateRange.end}.png`

From 8ebd8ba9e1127b6cdd43d138653ed1b0134228ff Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 7 Mar 2026 01:13:53 +0100
Subject: [PATCH 28/28] style: rename Content to Pages, Top Referrers to
 Referrers, consolidate changelog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rename dashboard panel titles for clarity. Merge 0.13.1-alpha into
0.13.0-alpha and clean up changelog entries — remove developer-facing
notes, simplify language, and update panel names throughout.
---
 CHANGELOG.md                          | 126 ++++++++------------------
 components/dashboard/ContentStats.tsx |   6 +-
 components/dashboard/TopReferrers.tsx |   4 +-
 3 files changed, 44 insertions(+), 92 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0275451..76af938 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,103 +6,55 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
-## [0.13.1-alpha] - 2026-03-07
+## [0.13.0-alpha] - 2026-03-07
 
 ### Added
 
-- **Hover percentages on dashboard panels.** Hover over any item in Content, Locations, Technology, or Top Referrers to see what percentage of total traffic it represents. The percentage slides in smoothly next to the count.
-- **Click any item to filter your dashboard.** Click a referrer, browser, country, page, or any other item in your dashboard panels to instantly filter the entire dashboard to just that traffic.
-- **New filter experience.** A single compact "Filter" button replaces the old filter UI. Click it to browse all available dimensions, see real values from your data with visitor counts, search or type a custom value, and apply — all in a quick dropdown without leaving the page.
+- **Dashboard filtering.** Filter your entire dashboard by any dimension — browser, country, page, device, OS, referrer, or UTM parameters. A single "Filter" button lets you browse dimensions, see real values from your data with visitor counts, search or type a custom value, and apply — all in a quick dropdown. Active filters appear as removable pills above your charts. Stack multiple filters to narrow things down. Filters are saved in the URL so you can bookmark or share a filtered view.
+- **Click any item to filter.** Click a referrer, browser, country, page, or any other item in your dashboard panels to instantly filter the entire dashboard to just that traffic.
+- **Hover percentages.** Hover over any item in Pages, Locations, Technology, or Referrers to see what percentage of total traffic it represents.
+- **Custom event properties.** Your custom events can now carry extra context — for example, `pulse.track('signup', { plan: 'pro', source: 'landing' })`. Click any event in Goals & Events to see a breakdown of its properties and values, no setup needed.
+- **AI traffic source identification.** Pulse recognizes visitors from ChatGPT, Perplexity, Claude, Gemini, Copilot, DeepSeek, Grok, Meta AI, You.com, and Phind. These appear in Referrers with proper icons and names instead of raw URLs.
+- **Automatic outbound link tracking.** Tracks when visitors click links to other websites. Shows up as "outbound link" events in Goals & Events — no setup needed.
+- **Automatic file download tracking.** Downloads of PDFs, ZIPs, Excel, Word, MP3s, and 20+ other formats are recorded as "file download" events automatically.
+- **Automatic 404 detection.** Detects when visitors land on pages that don't exist and records "404" events so you can find and fix broken links.
+- **Automatic scroll depth tracking.** Tracks how far visitors scroll — at 25%, 50%, 75%, and 100% — helping you understand which content keeps people reading.
 
 ### Improved
 
-- **Stronger filter pills.** Active filters now use solid brand-colored pills that are easy to spot in both light and dark mode. Click any pill to remove it.
-- **Campaigns panel redesigned.** Rebuilt from a wide table layout to a clean row-based design matching all other dashboard panels. UTM medium and campaign are always visible below the source name. Campaigns now sits in a half-width grid next to Goals & Events instead of taking the full width.
-- **Underline tab switchers.** Content, Locations, and Technology panels now use minimal underline tabs instead of pill-style switchers.
-- **"View all" moved to bottom of list.** The expand button on each panel is now a subtle "View all ›" link at the bottom of the data list instead of an icon in the header.
-- **Filter button uses filter icon.** The filter dropdown button now shows a funnel icon instead of a plus sign.
-- **Chart component rebuilt from scratch.** Cleaner stat cards without sparklines, wider Y-axis that no longer clips labels, integer-only ticks for visitor/pageview counts, lighter grid lines, average moved to a subtle toolbar badge instead of overlapping the chart, streamlined toolbar with inline controls and icon-only export, and a properly positioned live indicator.
+- **Chart rebuilt from scratch.** Cleaner stat cards, wider Y-axis that no longer clips labels, whole-number ticks for visitor and pageview counts, lighter grid lines, streamlined toolbar, and a properly positioned live indicator.
+- **Campaigns panel redesigned.** Clean row-based layout with UTM medium and campaign always visible below the source name. Now sits in a half-width grid next to Goals & Events.
+- **Better filter design.** Solid brand-colored filter pills that are easy to spot in light and dark mode. A funnel icon on the filter button. Click any pill to remove it.
+- **Underline tab switchers.** Pages, Locations, and Technology panels now use clean underline tabs instead of pill-style switchers.
+- **"View all" at the bottom.** The expand action on each panel is now a subtle "View all" link at the bottom of the list instead of an icon in the header.
+- **Faster dashboard loading.** Each section loads independently with smart caching. Data refreshes in the background, and switching tabs pauses updates to save resources — resuming when you return.
+- **Smoother navigation.** Switching pages, changing organizations, or signing in no longer triggers unnecessary background requests.
+- **Loading screen while redirecting to sign-in.** The login page now shows the Pulse logo and a message instead of a blank white screen.
+- **More reliable billing.** Plan changes, cancellations, and invoice views now handle session expiry and errors gracefully.
+- **Stronger browser security.** Your browser now only loads scripts, styles, and images from trusted sources, adding protection against cross-site scripting.
+- **More resilient analytics processing.** The system that processes your events now recovers automatically from unexpected errors instead of stopping silently.
+- **Dashboard stays responsive under heavy traffic.** Parallel queries are limited during peak usage, and in-progress queries are cancelled when you navigate away.
+- **Cleaner error messages.** Invalid form submissions show a simple message instead of exposing internal details.
 
 ### Fixed
 
+- **Tracking script now works on all tracked websites.** Page views were silently failing due to two separate issues. Both are fixed — your dashboard receives visits from all registered domains as expected.
+- **Rate limiting works correctly.** A bug was treating all visitors as the same person, so one heavy user could block everyone. Each visitor is now identified individually.
+- **Real-time visitor count no longer stops updating.** The live counter would hit a rate limit and stop refreshing. It now has enough headroom for normal usage.
+- **Team members can view real-time data.** Previously only the site creator could see live visitors. Now any team member in the same organization has access.
+- **Funnel details load correctly.** Opening a funnel previously showed an error. Funnels now display step-by-step conversion data as expected.
+- **Consistent date handling.** Funnels now use the same date format as the rest of Pulse, so date pickers and bookmarked links work correctly everywhere.
+- **Deleting a site cleans up all data.** Orphaned analytics events are now removed automatically before the site is deleted.
+- **App switcher and site icons load correctly.** Logos and favicons were blocked by a security policy. Fixed by allowing images from Ciphera and Google's favicon service.
+- **Current session highlighted in settings.** The active session marker now works correctly.
+- **Notifications load on sign-in.** The notification bell no longer errors briefly after signing in.
 - **Duplicate filters no longer stack.** Clicking the same item twice no longer adds the same filter again.
-- **Campaigns now respect your active filters.** Previously, the Campaigns panel ignored dashboard filters and always showed all campaigns. Now it filters along with everything else.
-- **Duplicate "Direct" entry removed from the referrer filter list.** The referrer suggestions no longer show "Direct" twice.
-- **Filter dropdowns now show all your data.** Previously, the filter value list only showed up to 10 items — so if you had 50 cities or 30 browsers, most were missing. Now up to 100 values are loaded when you open a filter, with a loading spinner while they're fetched.
-- **Chart Y-axis no longer shows fractional visitors.** Count metrics (visitors, pageviews) now use integer-only ticks — no more "0.75 visitors".
-- **Chart average label no longer shows excessive decimals.** The average is now shown as a rounded value in a toolbar badge instead of a floating label inside the chart.
-
-## [0.13.0-alpha] - 2026-03-02
-
-### Added
-
-- **Dashboard filtering.** You can now filter your entire dashboard by any dimension — browser, country, page, device, OS, referrer, or UTM parameters. Click "Add filter" to pick a dimension, choose an operator (is, is not, contains, does not contain), and enter a value. Active filters appear as removable pills above your charts. You can also stack multiple filters to narrow down exactly the traffic you're looking at. Filter selections are saved in the URL, so you can bookmark or share a filtered view with your team.
-- **Custom event properties.** Your custom events can now carry extra context. For example, tracking a signup with `pulse.track('signup', { plan: 'pro', source: 'landing' })` records the plan and source alongside the event. Click any event in your Goals & Events panel to see a breakdown of its properties and values — no setup or registration needed. This helps you understand not just what happened, but why.
-- **AI traffic source identification.** Pulse now automatically recognizes visitors coming from AI tools — ChatGPT, Perplexity, Claude, Gemini, Copilot, DeepSeek, Grok, Meta AI, You.com, and Phind. These sources appear in your Top Referrers with proper brand icons and display names instead of raw domain URLs. If someone clicks a link in an AI chat to visit your site, you'll see exactly which AI tool sent them.
-- **Automatic outbound link tracking.** Pulse now tracks when visitors click links that take them to other websites. These show up as "outbound link" events in your Goals & Events panel — no setup needed. You can turn this off in your tracking snippet settings if you prefer.
-- **Automatic file download tracking.** When a visitor clicks a link to a downloadable file — PDF, ZIP, Excel, Word, MP3, and 20+ other formats — Pulse records it as a "file download" event. Like outbound links, this works automatically with no setup required.
-- **Automatic 404 error page detection.** Pulse now detects when a visitor lands on a page that doesn't exist and records it as a "404" event. You'll see these in your Goals & Events panel so you can find and fix broken links. Works automatically — no setup needed.
-- **Automatic scroll depth tracking.** Pulse now tracks how far visitors scroll down each page — at 25%, 50%, 75%, and 100% milestones. These show up as scroll events in your Goals & Events panel, helping you understand which content keeps people reading. Works automatically with no configuration required.
-
-### Improved
-
-- **Cleaner internal API code.** The analytics data-fetching layer has been streamlined — 13 near-identical endpoint functions were consolidated using a shared pattern, cutting roughly half the code while keeping every feature working exactly as before. This makes it easier to add new analytics endpoints in the future and reduces the chance of inconsistencies between them.
-- **Simpler endpoint management on the backend.** The backend previously required adding every new analytics endpoint in two separate places — one for public dashboards and one for authenticated users. A shared route table now handles both automatically, so new endpoints only need to be defined once. This reduces the chance of one side getting out of sync with the other.
-- **Modern config loading for the app.** The app's configuration file now uses proper ES module imports instead of an older CommonJS pattern. This aligns with modern JavaScript standards and enables better tooling support.
-- **Complete API documentation in the backend README.** The developer documentation now lists all 80+ endpoints organized by category — ingestion, public dashboard, sites, analytics, real-time, goals, funnels, uptime, billing, notifications, admin, and audit. Previously only 12 endpoints were documented, which understated the full scope of the system.
-- **Login page now shows a loading screen while redirecting.** Previously, the login page briefly showed a blank white screen before redirecting you to the sign-in page. You'll now see the Pulse logo and a "Redirecting to log in..." message, matching the signup page experience.
-- **More reliable duplicate detection for goals.** When creating or updating a goal with a name that already exists, Pulse now uses the database's built-in error codes instead of checking error message text. This means duplicate goal detection works reliably regardless of database version or language settings.
-- **More consistent builds across environments.** The backend Docker image now uses a pinned operating system version instead of "latest," so builds produce identical results whether run today or months from now.
-- **Cleaner internal code for cookie handling.** Cookie domain logic that was duplicated in two places is now shared, reducing the chance of the two copies drifting out of sync during future changes.
-- **Smoother navigation across the app.** Switching pages, changing organizations, or signing in no longer triggers unnecessary background checks. Previously, an internal effect re-ran on every navigation because it watched the entire user object for changes — now it only reacts when your authentication state or organization actually changes. This makes page transitions faster and reduces redundant network requests.
-- **Faster uptime data cleanup under heavy usage.** Old uptime check records are now removed in small batches instead of all at once. Previously, a single large deletion could briefly slow down database performance when months of monitoring data had accumulated. Cleanup now runs incrementally so your dashboard stays responsive throughout.
-- **More reliable automated testing.** Backend tests that verify authentication and billing no longer rely on a fragile internal shortcut that could mask real bugs. If a code change accidentally reaches the database during a test, it now fails gracefully with a clear error instead of crashing silently.
-- **Database queries are now verified automatically before every release.** A new step in our release process runs all database operations against a real PostgreSQL database — including applying all schema migrations — so we catch query errors, missing columns, and data-access bugs before they reach production.
-- **Safer database schema changes.** The large migration that restructured how your analytics data is stored now has a documented rollback procedure. If anything goes wrong during a database upgrade, we can revert cleanly instead of requiring manual intervention.
-- **Easier setup for new developers.** Building and testing Pulse no longer requires a specific directory layout on your machine. All builds use a pre-packaged snapshot of dependencies, so you can clone the project and start working immediately without extra setup steps.
-- **Faster, smarter dashboard data loading.** Your dashboard now loads each section independently using an intelligent caching strategy. Data refreshes happen automatically in the background, and when you switch tabs the app pauses updates to save resources — resuming instantly when you return. This replaces the previous approach where everything loaded in one large batch, meaning your charts, visitor maps, and stats now appear faster and update more reliably.
-- **Better data accuracy across the dashboard.** All data displayed on the dashboard — pages, locations, devices, referrers, performance metrics, and goals — is now fully typed end-to-end. This eliminates an entire class of potential display bugs where data could be misinterpreted between the server and your screen.
-- **Dashboard stays fast under heavy traffic.** When many users view their dashboards at the same time, the backend now limits how many data queries run in parallel so it doesn't overwhelm the database. If you navigate away while the dashboard is loading, queries are cancelled immediately instead of continuing to run in the background.
-- **Improved error visibility and debugging.** When something goes wrong behind the scenes, the backend now logs detailed, structured information about what happened — including exactly which site, page, or operation was affected. This means issues are diagnosed and fixed faster, reducing any downtime or data gaps you might experience.
-- **Clearer error trails across the system.** Every database operation now includes context about what was happening when an error occurred. Instead of vague failures, support can trace problems back to their exact source — so if an issue affects your analytics, it gets identified and resolved much more quickly.
-- **Clearer rate limiting for analytics tracking.** When your tracking script sends too many events from the same session, Pulse now tells the script explicitly that the request was rejected. Previously, these events were silently accepted but never recorded, which could make your visitor counts look lower than expected without any visible explanation.
-- **Earlier detection of configuration problems.** The server now checks your email and internal integration settings at startup and warns you immediately if anything looks incomplete. Previously, you might not discover a misconfigured email setting until a billing alert or uptime notification failed to send.
-- **Safer campaign date handling.** Campaign analytics now use the same date validation as the rest of the app, including checks for invalid ranges and a maximum span of one year. Previously, campaigns used separate date parsing that skipped these checks.
-- **Full React 19 type coverage.** Upgraded TypeScript type definitions to match the React 19 runtime. Previously, the type definitions lagged behind at React 18, which could hide bugs and miss new React 19 APIs during development.
-- **Lower resource usage under load.** The backend now uses a single shared connection to Redis instead of opening dozens of separate ones. Previously, each rate limiter and internal component created its own connection pool, which could waste resources and risk hitting connection limits during heavy traffic.
-- **More reliable billing operations.** Billing actions like changing your plan, cancelling, and viewing invoices now benefit from the same automatic session refresh, request tracing, and error handling as the rest of the app. Previously, these used a separate internal path that could fail silently if your session expired mid-action.
-- **Stronger browser protection with Content Security Policy.** The app now tells your browser exactly which resources it's allowed to load — scripts, styles, images, and API connections are restricted to trusted sources only. This adds an extra layer of defence against cross-site scripting (XSS) attacks.
-- **Tighter cross-origin request handling.** The backend now only accepts requests from known Pulse and Ciphera origins instead of any website. This prevents other sites from making authenticated requests on your behalf.
-- **Stricter environment security checks.** Staging and other non-development deployments now refuse to start if critical secrets haven't been configured, catching configuration mistakes before they reach users.
-- **Billing configuration validated at startup.** Stripe payment keys are now checked when the server starts instead of when a billing request comes in. Misconfigured payment settings surface immediately during deployment rather than silently failing when you try to manage your subscription.
-- **Faster real-time visitor cleanup.** The background process that keeps active visitor counts accurate no longer briefly blocks other operations while scanning for stale sessions. Cleanup now runs incrementally so your dashboard stays responsive at all times.
-- **Stricter input validation on admin pages.** The internal admin panel now validates organisation identifiers before processing requests, preventing malformed data from reaching the database.
-- **Error messages no longer reveal internal details.** When you submit an invalid form, the error message now says "Invalid request body" instead of exposing internal field names and validation rules. This makes error messages cleaner while keeping your data safer.
-- **Better request cancellation for billing operations.** All billing-related database operations can now be properly cancelled if you navigate away or your connection drops. Previously, some operations would continue running in the background even after you left the page.
-- **More resilient event processing.** The background system that processes your analytics events now automatically recovers from unexpected errors instead of silently stopping. If something goes wrong, it restarts itself and continues processing — so you never lose incoming analytics data.
-
-### Fixed
-
-- **Rate limiting now works correctly for all visitors.** A bug in the backend meant that IP-based rate limiting — which protects against abuse on public dashboards and the tracking script — was treating all visitors as the same person. A single heavy user could hit the limit for everyone. Rate limiting now correctly identifies individual visitors, so one bad actor can't affect others.
-- **More reliable list rendering across the dashboard.** Pages, referrers, locations, devices, funnels, and other data lists now use stable identifiers (like page paths and referrer URLs) instead of array positions as their React keys. This prevents potential display glitches — such as stale data appearing in the wrong row — when lists are filtered, sorted, or updated in real time.
-- **Deleting a site now fully cleans up all its data.** Previously, deleting a site removed the site record but could leave behind orphaned analytics events in the database, slowly accumulating unused data. Now all events are cleaned up automatically in small batches before the site is removed, keeping your database tidy.
-- **Team members can now view real-time visitor data.** Previously, only the person who originally created a site could see live visitors and session details. Now any team member in the same organization can access real-time data for all their shared sites — the same way the rest of the dashboard already works.
-- **Consistent date handling across all analytics.** Funnel analytics now use the same date format (`YYYY-MM-DD`) as every other part of Pulse. Previously, funnels required a different, more technical date format, which meant date range pickers and bookmarked links didn't always work correctly between funnels and the rest of the dashboard.
-- **Tracking script now works on all tracked websites.** Page views were silently failing to record when the tracking script ran on your website. Two issues were at play: the backend was rejecting analytics data sent from tracked sites, and even after that was resolved, events were silently dropped during processing because they were missing a required identifier. Both are now fixed — your dashboard receives visits from all registered domains as expected.
-- **Real-time visitor count no longer stops updating.** The dashboard's live visitor counter would quickly hit a rate limit and stop refreshing, showing "Site not found" errors. The limit was too low for normal polling, especially with multiple tabs open. It now has enough headroom for typical usage.
-- **Funnel details now load correctly.** Opening a funnel showed "Unable to load funnel" with a server error. An internal query was referencing data that no longer existed at that stage of processing, causing it to fail every time. Funnels now load and display step-by-step conversion data as expected.
-- **App switcher and site icons now load correctly.** The Pulse, Drop, and Auth logos in the app switcher — and site favicons on the dashboard — were blocked by the browser's Content Security Policy. The policy now allows images from Ciphera's own domain and Google's favicon service, so all icons display as expected.
-- **Better crash protection in goals and real-time views.** Fixed an issue where the backend could crash under rare conditions when checking permissions for goals or real-time visitor data. The app now handles unexpected values gracefully instead of crashing.
-- **More reliable service health reporting.** The backend health check no longer falsely reports the service as unhealthy after sustained traffic. Previously, an internal counter grew over time and would eventually cross a fixed threshold — even under normal load — causing orchestrators to unnecessarily restart the service.
-- **Session list now correctly highlights your current session.** The active sessions list in settings now properly identifies which session you're currently using. Previously, the "current session" marker never appeared due to an internal mismatch in how sessions were identified.
-- **Notifications no longer fail to load on sign-in.** The notification bell now loads correctly even when the app is still setting up your workspace context. Previously, it could briefly show an error right after signing in.
-- **Fixed a service worker error on first visit.** Removed leftover icon files with invalid filenames that caused a caching error in the background. This had no visible effect but produced console warnings.
-- **More reliable database migrations.** The migration system no longer silently skips partially failed database updates. If an update fails, it stops immediately so the issue can be identified and fixed — rather than marking it as complete and moving on with missing changes.
-
-### Removed
-
-- **Cleaned up unused files.** Removed six leftover component and utility files that were no longer used anywhere in the app, along with dead backend code. This reduces clutter and keeps the codebase easier to navigate.
-- **Removed unused backend code.** Deleted an old CORS middleware that was never wired up, and an 80-line legacy funnel query that had been superseded by a faster implementation. Less code means fewer things to maintain and audit.
+- **Campaigns respect active filters.** The Campaigns panel now filters along with everything else instead of always showing all campaigns.
+- **No duplicate "Direct" in referrer filter.** The referrer suggestions no longer show "Direct" twice.
+- **Filter dropdowns show all your data.** Previously limited to 10 items — now loads up to 100 values.
+- **Chart Y-axis shows whole numbers.** Visitor and pageview counts no longer show fractional values like "0.75 visitors".
+- **Duplicate goal names detected reliably.** Goal name uniqueness checks now work correctly regardless of your setup.
+- **Health checks stay accurate.** The backend health check no longer falsely reports the service as unhealthy after sustained traffic.
 
 ## [0.12.0-alpha] - 2026-03-01
 
diff --git a/components/dashboard/ContentStats.tsx b/components/dashboard/ContentStats.tsx
index 21add44..33ac2ad 100644
--- a/components/dashboard/ContentStats.tsx
+++ b/components/dashboard/ContentStats.tsx
@@ -97,9 +97,9 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
       <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-6">
           <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
-            Content
+            Pages
           </h3>
-          <div className="flex gap-1" role="tablist" aria-label="Content view tabs" onKeyDown={handleTabKeyDown}>
+          <div className="flex gap-1" role="tablist" aria-label="Pages view tabs" onKeyDown={handleTabKeyDown}>
             {(['top_pages', 'entry_pages', 'exit_pages'] as Tab[]).map((tab) => (
               <button
                 key={tab}
@@ -188,7 +188,7 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
       <Modal
         isOpen={isModalOpen}
         onClose={() => setIsModalOpen(false)}
-        title={`Content - ${getTabLabel(activeTab)}`}
+        title={`Pages - ${getTabLabel(activeTab)}`}
       >
         <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
           {isLoadingFull ? (
diff --git a/components/dashboard/TopReferrers.tsx b/components/dashboard/TopReferrers.tsx
index 7e40a36..38c8de3 100644
--- a/components/dashboard/TopReferrers.tsx
+++ b/components/dashboard/TopReferrers.tsx
@@ -86,7 +86,7 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
       <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-4">
           <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
-            Top Referrers
+            Referrers
           </h3>
         </div>
 
@@ -152,7 +152,7 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
       <Modal
         isOpen={isModalOpen}
         onClose={() => setIsModalOpen(false)}
-        title="Top Referrers"
+        title="Referrers"
       >
         <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
           {isLoadingFull ? (