feat: enhance Campaigns component with sortable columns, export functionality, and improved loading state

2026-02-11 19:46:12 +01:00
parent 06a12fd96e
commit a390fb2129
4 changed files with 230 additions and 33 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),

 ### Changed

+- **Campaigns block improvements.** The Campaigns card now supports sortable columns (Source, Medium, Campaign, Visitors, Pageviews), source favicons with display names (matching Top Referrers), a Pageviews column, and em-dash (—) for empty Medium/Campaign. Loading state uses a skeleton instead of a spinner. Rows use stable keys for better React reconciliation. An Export button exports campaigns to CSV; the main dashboard Export (PDF/Excel) also includes campaigns when available.
 - **Top Referrers favicons (PULSE-52).** The Top Referrers card now shows real site favicons (e.g. Google, ChatGPT, Instagram) when the referrer is a domain or URL. “Direct” and “Unknown” keep the globe icon; if a favicon fails to load, the previous icon is shown as fallback.
 - **Referrer display names.** Referrers now show friendly names (e.g. “Google”, “Kagi”) using a heuristic from the hostname plus a small override map for famous brands (ChatGPT, LinkedIn, X, etc.). New sites get a sensible name without being added to a list.
 - **Top Referrers merged by name.** Rows that map to the same display name (e.g. `chatgpt.com` and `https://chatgpt.com/...`) are merged into one row with combined pageviews, so the same source no longer appears twice.
--- a/app/sites/[id]/page.tsx
+++ b/app/sites/[id]/page.tsx
@@ -5,7 +5,7 @@ import { useEffect, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { motion } from 'framer-motion'
 import { getSite, type Site } from '@/lib/api/sites'
-import { getStats, getRealtime, getDailyStats, getTopPages, getTopReferrers, getCountries, getCities, getRegions, getBrowsers, getOS, getDevices, getScreenResolutions, getEntryPages, getExitPages, getDashboard, getPerformanceByPage, type Stats, type DailyStat, type PerformanceByPageStat } from '@/lib/api/stats'
+import { getStats, getRealtime, getDailyStats, getTopPages, getTopReferrers, getCountries, getCities, getRegions, getBrowsers, getOS, getDevices, getScreenResolutions, getEntryPages, getExitPages, getDashboard, getCampaigns, getPerformanceByPage, type Stats, type DailyStat, type PerformanceByPageStat } from '@/lib/api/stats'
 import { formatNumber, formatDuration, getDateRange } from '@/lib/utils/format'
 import { toast } from '@ciphera-net/ui'
 import { getAuthErrorMessage } from '@/lib/utils/authErrors'
@@ -50,6 +50,7 @@ export default function SiteDashboardPage() {
  const [performance, setPerformance] = useState<{ lcp: number, cls: number, inp: number }>({ lcp: 0, cls: 0, inp: 0 })
  const [performanceByPage, setPerformanceByPage] = useState<PerformanceByPageStat[] | null>(null)
  const [goalCounts, setGoalCounts] = useState<Array<{ event_name: string; count: number }>>([])
+  const [campaigns, setCampaigns] = useState<any[]>([])
  const [dateRange, setDateRange] = useState(getDateRange(30))
  const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
  const [isExportModalOpen, setIsExportModalOpen] = useState(false)
@@ -163,7 +164,7 @@ export default function SiteDashboardPage() {
      setLoading(true)
      const interval = dateRange.start === dateRange.end ? todayInterval : multiDayInterval
      
-      const [data, prevStatsData, prevDailyStatsData] = await Promise.all([
+      const [data, prevStatsData, prevDailyStatsData, campaignsData] = await Promise.all([
        getDashboard(siteId, dateRange.start, dateRange.end, 10, interval),
        (async () => {
          const prevRange = getPreviousDateRange(dateRange.start, dateRange.end)
@@ -172,7 +173,8 @@ export default function SiteDashboardPage() {
        (async () => {
          const prevRange = getPreviousDateRange(dateRange.start, dateRange.end)
          return getDailyStats(siteId, prevRange.start, prevRange.end, interval)
-        })()
+        })(),
+        getCampaigns(siteId, dateRange.start, dateRange.end, 100),
      ])

      setSite(data.site)
@@ -197,6 +199,7 @@ export default function SiteDashboardPage() {
      setPerformance(data.performance || { lcp: 0, cls: 0, inp: 0 })
      setPerformanceByPage(data.performance_by_page ?? null)
      setGoalCounts(Array.isArray(data.goal_counts) ? data.goal_counts : [])
+      setCampaigns(Array.isArray(campaignsData) ? campaignsData : [])
    } catch (error: unknown) {
      toast.error(getAuthErrorMessage(error) || 'Failed to load data: ' + ((error as Error)?.message || 'Unknown error'))
    } finally {
@@ -439,6 +442,7 @@ export default function SiteDashboardPage() {
        stats={stats}
        topPages={topPages}
        topReferrers={topReferrers}
+        campaigns={campaigns}
      />
    </motion.div>
  )
--- a/components/dashboard/Campaigns.tsx
+++ b/components/dashboard/Campaigns.tsx
@@ -1,10 +1,12 @@
 'use client'

-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import Link from 'next/link'
 import { formatNumber } from '@/lib/utils/format'
 import { Modal, ArrowRightIcon, Button } from '@ciphera-net/ui'
+import { ChevronDownIcon, DownloadIcon } from '@ciphera-net/ui'
 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'
@@ -15,6 +17,26 @@ interface CampaignsProps {
 }

 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 }: CampaignsProps) {
  const [data, setData] = useState<CampaignStat[]>([])
@@ -23,6 +45,9 @@ export default function Campaigns({ siteId, dateRange }: CampaignsProps) {
  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(() => {
    const fetchData = async () => {
@@ -58,11 +83,81 @@ export default function Campaigns({ siteId, dateRange }: CampaignsProps) {
    }
  }, [isModalOpen, siteId, dateRange])

+  const sortedData = useMemo(
+    () => sortCampaigns(data, sortKey, sortDir),
+    [data, sortKey, sortDir]
+  )
+  const sortedFullData = useMemo(
+    () => sortCampaigns(fullData.length > 0 ? fullData : data, sortKey, sortDir),
+    [fullData, data, sortKey, sortDir]
+  )
  const hasData = data.length > 0
-  const displayedData = hasData ? data.slice(0, LIMIT) : []
+  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')
+    }
+  }
+
+  function renderSourceIcon(source: string) {
+    const faviconUrl = getReferrerFavicon(source)
+    const useFavicon = faviconUrl && !faviconFailed.has(source)
+    if (useFavicon) {
+      return (
+        <img
+          src={faviconUrl}
+          alt=""
+          className="w-5 h-5 flex-shrink-0 rounded object-contain"
+          onError={() => setFaviconFailed((prev) => new Set(prev).add(source))}
+        />
+      )
+    }
+    return <span className="text-lg flex-shrink-0">{getReferrerIcon(source)}</span>
+  }
+
+  const handleExportCampaigns = () => {
+    const rows = sortedData.length > 0 ? sortedData : data
+    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(',')
+      ),
+    ]
+    const blob = new Blob([csvRows.join('\n')], { type: 'text/csv;charset=utf-8;' })
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.setAttribute('href', url)
+    link.setAttribute('download', `campaigns_${dateRange.start}_${dateRange.end}.csv`)
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    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-0.5 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">
@@ -71,6 +166,16 @@ export default function Campaigns({ siteId, dateRange }: CampaignsProps) {
            Campaigns
          </h3>
          <div className="flex items-center gap-2">
+            {hasData && (
+              <Button
+                variant="ghost"
+                onClick={handleExportCampaigns}
+                className="h-8 px-3 text-xs gap-1.5"
+              >
+                <DownloadIcon className="w-3.5 h-3.5" />
+                Export
+              </Button>
+            )}
            <Button
              variant="ghost"
              onClick={() => setIsBuilderOpen(true)}
@@ -92,32 +197,66 @@ export default function Campaigns({ siteId, dateRange }: CampaignsProps) {
        </div>

        {isLoading ? (
-          <div className="space-y-2 flex-1 min-h-[270px] flex flex-col items-center justify-center gap-2">
-            <div className="animate-spin w-6 h-6 border-2 border-neutral-300 dark:border-neutral-700 border-t-brand-orange rounded-full" />
-            <p className="text-sm text-neutral-500 dark:text-neutral-400">Loading...</p>
+          <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>
+            ))}
          </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">Source</div>
-              <div className="col-span-3">Medium</div>
-              <div className="col-span-3">Campaign</div>
-              <div className="col-span-2 text-right">Visitors</div>
+              <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, index) => (
-              <div key={index} 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">
-                <div className="col-span-4 truncate text-neutral-900 dark:text-white font-medium" title={item.source}>
-                  {item.source}
+            {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"
+              >
+                <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-3 truncate text-neutral-600 dark:text-neutral-400" title={item.medium}>
-                  {item.medium || '-'}
+                <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-3 truncate text-neutral-600 dark:text-neutral-400" title={item.campaign}>
-                  {item.campaign || '-'}
+                <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>
            ))}
            {Array.from({ length: emptySlots }).map((_, i) => (
@@ -161,24 +300,34 @@ export default function Campaigns({ siteId, dateRange }: CampaignsProps) {
            <>
              <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-3">Medium</div>
-                <div className="col-span-3">Campaign</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>
-              {(fullData.length > 0 ? fullData : data).map((item, index) => (
-                <div key={index} 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="col-span-4 truncate text-neutral-900 dark:text-white font-medium" title={item.source}>
-                    {item.source}
+              {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="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-3 truncate text-neutral-600 dark:text-neutral-400" title={item.medium}>
-                    {item.medium || '-'}
+                  <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-3 truncate text-neutral-600 dark:text-neutral-400" title={item.campaign}>
-                    {item.campaign || '-'}
+                  <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>
              ))}
            </>
--- a/components/dashboard/ExportModal.tsx
+++ b/components/dashboard/ExportModal.tsx
@@ -8,7 +8,7 @@ import autoTable from 'jspdf-autotable'
 import type { DailyStat } from './Chart'
 import { formatNumber, formatDuration } from '@/lib/utils/format'
 import { getReferrerDisplayName, mergeReferrersByDisplayName } from '@/lib/utils/icons'
-import type { TopPage, TopReferrer } from '@/lib/api/stats'
+import type { TopPage, TopReferrer, CampaignStat } from '@/lib/api/stats'

 interface ExportModalProps {
  isOpen: boolean
@@ -22,6 +22,7 @@ interface ExportModalProps {
  }
  topPages?: TopPage[]
  topReferrers?: TopReferrer[]
+  campaigns?: CampaignStat[]
 }

 type ExportFormat = 'csv' | 'json' | 'xlsx' | 'pdf'
@@ -44,7 +45,7 @@ const loadImage = (src: string): Promise<string> => {
  })
 }

-export default function ExportModal({ isOpen, onClose, data, stats, topPages, topReferrers }: ExportModalProps) {
+export default function ExportModal({ isOpen, onClose, data, stats, topPages, topReferrers, campaigns }: ExportModalProps) {
  const [format, setFormat] = useState<ExportFormat>('csv')
  const [filename, setFilename] = useState(`pulse_export_${new Date().toISOString().split('T')[0]}`)
  const [includeHeader, setIncludeHeader] = useState(true)
@@ -94,7 +95,19 @@ export default function ExportModal({ isOpen, onClose, data, stats, topPages, to
    } else if (format === 'xlsx') {
      const ws = XLSX.utils.json_to_sheet(exportData)
      const wb = XLSX.utils.book_new()
-      XLSX.utils.book_append_sheet(wb, ws, "Data")
+      XLSX.utils.book_append_sheet(wb, ws, 'Data')
+      if (campaigns && campaigns.length > 0) {
+        const campaignsSheet = XLSX.utils.json_to_sheet(
+          campaigns.map(c => ({
+            Source: getReferrerDisplayName(c.source),
+            Medium: c.medium || '—',
+            Campaign: c.campaign || '—',
+            Visitors: c.visitors,
+            Pageviews: c.pageviews,
+          }))
+        )
+        XLSX.utils.book_append_sheet(wb, campaignsSheet, 'Campaigns')
+      }
      const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
      const blob = new Blob([wbout], { type: 'application/octet-stream' })
      
@@ -291,6 +304,36 @@ export default function ExportModal({ isOpen, onClose, data, stats, topPages, to
            columnStyles: { 1: { halign: 'right' } },
            alternateRowStyles: { fillColor: [255, 250, 245] },
        })
+        
+        finalY = (doc as any).lastAutoTable.finalY + 10
+      }
+
+      // Campaigns Table
+      if (campaigns && campaigns.length > 0) {
+        if (finalY + 40 > doc.internal.pageSize.height) {
+          doc.addPage()
+          finalY = 20
+        }
+        doc.setFontSize(14)
+        doc.setTextColor(23, 23, 23)
+        doc.text('Campaigns', 14, finalY)
+        finalY += 5
+        const campaignsData = campaigns.slice(0, 10).map(c => [
+          getReferrerDisplayName(c.source),
+          c.medium || '—',
+          c.campaign || '—',
+          formatNumber(c.visitors),
+          formatNumber(c.pageviews),
+        ])
+        autoTable(doc, {
+          startY: finalY,
+          head: [['Source', 'Medium', 'Campaign', 'Visitors', 'Pageviews']],
+          body: campaignsData,
+          styles: { font: 'helvetica', fontSize: 9, cellPadding: 3 },
+          headStyles: { fillColor: [249, 115, 22], textColor: [255, 255, 255], fontStyle: 'bold' },
+          columnStyles: { 3: { halign: 'right' }, 4: { halign: 'right' } },
+          alternateRowStyles: { fillColor: [255, 250, 245] },
+        })
      }

      doc.save(`${filename || 'export'}.pdf`)