feat: add header icons to all dashboard panels

Consistent icon treatment across Pages, Referrers, Locations,
Technology, Campaigns, Peak Hours, Goals, and Search panels.

components/dashboard/Campaigns.tsx

@@ -127,6 +127,7 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
       <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">
           <div className="flex items-center gap-2">
+            <Megaphone className="w-5 h-5 text-neutral-400 dark:text-neutral-500" weight="bold" />
             <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
               Campaigns
             </h3>

components/dashboard/ContentStats.tsx

@@ -6,7 +6,7 @@ import { logger } from '@/lib/utils/logger'
 import { formatNumber } from '@ciphera-net/ui'
 import { useTabListKeyboard } from '@/lib/hooks/useTabListKeyboard'
 import { TopPage, getTopPages, getEntryPages, getExitPages } from '@/lib/api/stats'
-import { FrameCornersIcon } from '@phosphor-icons/react'
+import { Files, FrameCornersIcon } from '@phosphor-icons/react'
 import { Modal, ArrowUpRightIcon, LayoutDashboardIcon } from '@ciphera-net/ui'
 import { ListSkeleton } from '@/components/skeletons'
 import VirtualList from './VirtualList'
@@ -101,6 +101,7 @@ 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-2">
+            <Files className="w-5 h-5 text-neutral-400 dark:text-neutral-500" weight="bold" />
             <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
               Pages
             </h3>

components/dashboard/GoalStats.tsx

@@ -2,6 +2,7 @@
 
 import Link from 'next/link'
 import { formatNumber } from '@ciphera-net/ui'
+import { Target } from '@phosphor-icons/react'
 import { BookOpenIcon, ArrowRightIcon } from '@ciphera-net/ui'
 import type { GoalCountStat } from '@/lib/api/stats'
 
@@ -21,9 +22,12 @@ export default function GoalStats({ goalCounts, onSelectEvent }: GoalStatsProps)
   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">
+        <div className="flex items-center gap-2">
-          Goals & Events
+          <Target className="w-5 h-5 text-neutral-400 dark:text-neutral-500" weight="bold" />
-        </h3>
+          <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+            Goals & Events
+          </h3>
+        </div>
       </div>
 
       {hasData ? (

components/dashboard/Locations.tsx

@@ -14,7 +14,7 @@ const Globe = dynamic(() => import('./Globe'), { ssr: false })
 import { Modal, GlobeIcon } from '@ciphera-net/ui'
 import { ListSkeleton } from '@/components/skeletons'
 import VirtualList from './VirtualList'
-import { ShieldCheck, Detective, Broadcast, FrameCornersIcon } from '@phosphor-icons/react'
+import { ShieldCheck, Detective, Broadcast, MapPin, FrameCornersIcon } from '@phosphor-icons/react'
 import { getCountries, getCities, getRegions } from '@/lib/api/stats'
 import { type DimensionFilter } from '@/lib/filters'
 
@@ -219,6 +219,7 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
       <div ref={containerRef} 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-2">
+            <MapPin className="w-5 h-5 text-neutral-400 dark:text-neutral-500" weight="bold" />
             <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
               Locations
             </h3>

components/dashboard/PeakHours.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useState, useEffect, useMemo, useRef, type CSSProperties } from 'react'
+import { Clock } from '@phosphor-icons/react'
 import { motion, AnimatePresence } from 'framer-motion'
 import { logger } from '@/lib/utils/logger'
 import { getDailyStats } from '@/lib/api/stats'
@@ -128,7 +129,10 @@ export default function PeakHours({ siteId, dateRange }: PeakHoursProps) {
   return (
     <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
       <div className="flex items-center justify-between mb-1">
-        <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">Peak Hours</h3>
+        <div className="flex items-center gap-2">
+          <Clock className="w-5 h-5 text-neutral-400 dark:text-neutral-500" weight="bold" />
+          <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">Peak Hours</h3>
+        </div>
       </div>
       <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-5">
         When your visitors are most active

components/dashboard/TechSpecs.tsx

@@ -6,7 +6,7 @@ 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 { Monitor, FrameCornersIcon } from '@phosphor-icons/react'
+import { Monitor, DeviceMobile, FrameCornersIcon } from '@phosphor-icons/react'
 import { Modal, GridIcon } from '@ciphera-net/ui'
 import { ListSkeleton } from '@/components/skeletons'
 import VirtualList from './VirtualList'
@@ -131,6 +131,7 @@ 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-2">
+            <DeviceMobile className="w-5 h-5 text-neutral-400 dark:text-neutral-500" weight="bold" />
             <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
               Technology
             </h3>

components/dashboard/TopReferrers.tsx

@@ -5,7 +5,7 @@ import { logger } from '@/lib/utils/logger'
 import Image from 'next/image'
 import { formatNumber } from '@ciphera-net/ui'
 import { getReferrerDisplayName, getReferrerFavicon, getReferrerIcon, mergeReferrersByDisplayName } from '@/lib/utils/icons'
-import { FrameCornersIcon } from '@phosphor-icons/react'
+import { ArrowSquareOut, FrameCornersIcon } from '@phosphor-icons/react'
 import { Modal, GlobeIcon } from '@ciphera-net/ui'
 import { ListSkeleton } from '@/components/skeletons'
 import VirtualList from './VirtualList'
@@ -89,6 +89,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">
           <div className="flex items-center gap-2">
+            <ArrowSquareOut className="w-5 h-5 text-neutral-400 dark:text-neutral-500" weight="bold" />
             <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
               Referrers
             </h3>