feat: add actionable CTAs to all dashboard empty states

- Campaigns: "Build a UTM URL" opens UTM builder modal directly
- Pages/Referrers/Locations/Technology: "Install tracking script"
  links to /installation
- Matches existing CTA pattern from GoalStats
This commit is contained in:
Usman Baig
2026-03-15 22:00:58 +01:00
parent c21d7b9073
commit df10d4e747
6 changed files with 42 additions and 9 deletions

View File

@@ -6,8 +6,9 @@ import { logger } from '@/lib/utils/logger'
import { formatNumber } from '@ciphera-net/ui'
import { useTabListKeyboard } from '@/lib/hooks/useTabListKeyboard'
import { getBrowserIcon, getOSIcon, getDeviceIcon } from '@/lib/utils/icons'
import Link from 'next/link'
import { Monitor, DeviceMobile, FrameCornersIcon } from '@phosphor-icons/react'
import { Modal, GridIcon } from '@ciphera-net/ui'
import { Modal, GridIcon, ArrowRightIcon } from '@ciphera-net/ui'
import { ListSkeleton } from '@/components/skeletons'
import VirtualList from './VirtualList'
import { getBrowsers, getOS, getDevices, getScreenResolutions } from '@/lib/api/stats'
@@ -223,6 +224,13 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
<p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-xs">
Browser, OS, and device information will appear as visitors arrive.
</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-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange/20 rounded"
>
Install tracking script
<ArrowRightIcon className="w-4 h-4" />
</Link>
</div>
)}
</div>