From 4ceb33b9461aac16d1f9b29e9f457ebc509b3088 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 14 Mar 2026 18:27:12 +0100
Subject: [PATCH] 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    |  1 +
 components/dashboard/ContentStats.tsx |  3 ++-
 components/dashboard/GoalStats.tsx    | 10 +++++++---
 components/dashboard/Locations.tsx    |  3 ++-
 components/dashboard/PeakHours.tsx    |  6 +++++-
 components/dashboard/TechSpecs.tsx    |  3 ++-
 components/dashboard/TopReferrers.tsx |  3 ++-
 7 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/components/dashboard/Campaigns.tsx b/components/dashboard/Campaigns.tsx
index 397f5b9..38e5cb0 100644
--- a/components/dashboard/Campaigns.tsx
+++ b/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>
diff --git a/components/dashboard/ContentStats.tsx b/components/dashboard/ContentStats.tsx
index 4ed61aa..f932c04 100644
--- a/components/dashboard/ContentStats.tsx
+++ b/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>
diff --git a/components/dashboard/GoalStats.tsx b/components/dashboard/GoalStats.tsx
index 8874081..2299642 100644
--- a/components/dashboard/GoalStats.tsx
+++ b/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">
-          Goals & Events
-        </h3>
+        <div className="flex items-center gap-2">
+          <Target 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">
+            Goals & Events
+          </h3>
+        </div>
       </div>
 
       {hasData ? (
diff --git a/components/dashboard/Locations.tsx b/components/dashboard/Locations.tsx
index b752447..95cc7af 100644
--- a/components/dashboard/Locations.tsx
+++ b/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>
diff --git a/components/dashboard/PeakHours.tsx b/components/dashboard/PeakHours.tsx
index 541ce5c..b80f068 100644
--- a/components/dashboard/PeakHours.tsx
+++ b/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
diff --git a/components/dashboard/TechSpecs.tsx b/components/dashboard/TechSpecs.tsx
index cd2114f..da881df 100644
--- a/components/dashboard/TechSpecs.tsx
+++ b/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>
diff --git a/components/dashboard/TopReferrers.tsx b/components/dashboard/TopReferrers.tsx
index 78e4fdd..b415142 100644
--- a/components/dashboard/TopReferrers.tsx
+++ b/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>