ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

[PULSE-11] Add Campaigns report to dashboard #6

Merged
uz1mani merged 3 commits from staging into main 2026-02-04 18:46:42 +00:00
Conversation 2 Commits 3 Files Changed 3 +211
3 changed files with 211 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/sites/[id]/page.tsx
View File

@@ -18,6 +18,7 @@ import TechSpecs from '@/components/dashboard/TechSpecs'
import Chart from '@/components/dashboard/Chart' import Chart from '@/components/dashboard/Chart'
import PerformanceStats from '@/components/dashboard/PerformanceStats' import PerformanceStats from '@/components/dashboard/PerformanceStats'
import GoalStats from '@/components/dashboard/GoalStats' import GoalStats from '@/components/dashboard/GoalStats'
import Campaigns from '@/components/dashboard/Campaigns'
export default function SiteDashboardPage() { export default function SiteDashboardPage() {
const { user } = useAuth() const { user } = useAuth()
@@ -377,6 +378,11 @@ export default function SiteDashboardPage() {
/> />
</div> </div>
{/* Campaigns Report */}
<div className="mb-8">
<Campaigns siteId={siteId} dateRange={dateRange} />
</div>
<div className="mb-8"> <div className="mb-8">
<GoalStats goalCounts={goalCounts} /> <GoalStats goalCounts={goalCounts} />
</div> </div>

172
components/dashboard/Campaigns.tsx Normal file
View File

@@ -0,0 +1,172 @@
'use client'
import { useState, useEffect } from 'react'
import Link from 'next/link'
import { formatNumber } from '@/lib/utils/format'
import { Modal, ArrowRightIcon } from '@ciphera-net/ui'
import { getCampaigns, CampaignStat } from '@/lib/api/stats'
import { FaBullhorn } from 'react-icons/fa'
interface CampaignsProps {
siteId: string
dateRange: { start: string, end: string }
}
const LIMIT = 7
export default function Campaigns({ siteId, dateRange }: CampaignsProps) {
const [data, setData] = useState<CampaignStat[]>([])
const [isLoading, setIsLoading] = useState(true)
const [isModalOpen, setIsModalOpen] = useState(false)
const [fullData, setFullData] = useState<CampaignStat[]>([])
const [isLoadingFull, setIsLoadingFull] = useState(false)
useEffect(() => {
const fetchData = async () => {
setIsLoading(true)
try {
const result = await getCampaigns(siteId, dateRange.start, dateRange.end, 10)
setData(result)
} catch (e) {
console.error(e)
} finally {
setIsLoading(false)
}
}
fetchData()
}, [siteId, dateRange])
useEffect(() => {
if (isModalOpen) {
const fetchFullData = async () => {
setIsLoadingFull(true)
try {
const result = await getCampaigns(siteId, dateRange.start, dateRange.end, 100)
setFullData(result)
} catch (e) {
console.error(e)
} finally {
setIsLoadingFull(false)
}
}
fetchFullData()
} else {
setFullData([])
}
}, [isModalOpen, siteId, dateRange])
greptile-apps[bot] commented 2026-02-04 18:38:27 +00:00 (Migrated from github.com)
Review
Copy Link

The modal fetches the same data that's already loaded in data. Either reuse the existing data state, or if you need to fetch more records (with a higher limit), modify getCampaigns to accept a limit parameter like other API functions in the codebase (getTopReferrers, getTopPages, etc.).

Prompt To Fix With AI 
This is a comment left during a code review.
Path: components/dashboard/Campaigns.tsx
Line: 39:56

Comment:
The modal fetches the same data that's already loaded in `data`. Either reuse the existing `data` state, or if you need to fetch more records (with a higher limit), modify `getCampaigns` to accept a `limit` parameter like other API functions in the codebase (`getTopReferrers`, `getTopPages`, etc.).

How can I resolve this? If you propose a fix, please make it concise.
The modal fetches the same data that's already loaded in `data`. Either reuse the existing `data` state, or if you need to fetch more records (with a higher limit), modify `getCampaigns` to accept a `limit` parameter like other API functions in the codebase (`getTopReferrers`, `getTopPages`, etc.). <details><summary>Prompt To Fix With AI</summary> `````markdown This is a comment left during a code review. Path: components/dashboard/Campaigns.tsx Line: 39:56 Comment: The modal fetches the same data that's already loaded in `data`. Either reuse the existing `data` state, or if you need to fetch more records (with a higher limit), modify `getCampaigns` to accept a `limit` parameter like other API functions in the codebase (`getTopReferrers`, `getTopPages`, etc.). How can I resolve this? If you propose a fix, please make it concise. ````` </details>
const hasData = data.length > 0
const displayedData = hasData ? data.slice(0, LIMIT) : []
const emptySlots = Math.max(0, LIMIT - displayedData.length)
const showViewAll = hasData && data.length > LIMIT
return (
<>
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl 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">
Campaigns
</h3>
{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"
>
View All
</button>
)}
</div>
{isLoading ? (
<div className="space-y-2 flex-1 min-h-[270px] flex flex-col items-center justify-center">
<p className="text-neutral-500">Loading...</p>
</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>
{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}
</div>
<div className="col-span-3 truncate text-neutral-600 dark:text-neutral-400" title={item.medium}>
{item.medium || '-'}
</div>
<div className="col-span-3 truncate text-neutral-600 dark:text-neutral-400" title={item.campaign}>
{item.campaign || '-'}
</div>
<div className="col-span-2 text-right font-semibold text-neutral-900 dark:text-white">
{formatNumber(item.visitors)}
</div>
</div>
))}
{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" />
</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-1.5 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>
<Modal
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
title="All Campaigns"
>
<div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
{isLoadingFull ? (
<div className="py-4 text-center text-neutral-500">Loading...</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-3">Medium</div>
<div className="col-span-3">Campaign</div>
<div className="col-span-2 text-right">Visitors</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}
</div>
<div className="col-span-3 truncate text-neutral-600 dark:text-neutral-400" title={item.medium}>
{item.medium || '-'}
</div>
<div className="col-span-3 truncate text-neutral-600 dark:text-neutral-400" title={item.campaign}>
{item.campaign || '-'}
</div>
<div className="col-span-2 text-right font-semibold text-neutral-900 dark:text-white">
{formatNumber(item.visitors)}
</div>
</div>
))}
</>
)}
</div>
</Modal>
</>
)
}

33
lib/api/stats.ts
View File

@@ -39,6 +39,14 @@ export interface GoalCountStat {
display_name?: string | null display_name?: string | null
} }
export interface CampaignStat {
source: string
medium: string
campaign: string
visitors: number
pageviews: number
}
export interface TopReferrer { export interface TopReferrer {
referrer: string referrer: string
pageviews: number pageviews: number
@@ -268,6 +276,31 @@ export async function getPublicPerformanceByPage(
return res?.performance_by_page ?? [] return res?.performance_by_page ?? []
} }
export async function getGoalStats(siteId: string, startDate?: string, endDate?: string, limit = 20): Promise<GoalCountStat[]> {
const params = new URLSearchParams()
if (startDate) params.append('start_date', startDate)
if (endDate) params.append('end_date', endDate)
params.append('limit', limit.toString())
return apiRequest<{ goal_counts: GoalCountStat[] }>(`/sites/${siteId}/goals/stats?${params.toString()}`).then(r => r?.goal_counts || [])
}
export async function getCampaigns(siteId: string, startDate?: string, endDate?: string, limit = 10): Promise<CampaignStat[]> {
const params = new URLSearchParams()
if (startDate) params.append('start_date', startDate)
if (endDate) params.append('end_date', endDate)
params.append('limit', limit.toString())
return apiRequest<{ campaigns: CampaignStat[] }>(`/sites/${siteId}/campaigns?${params.toString()}`).then(r => r?.campaigns || [])
}
export async function getPublicCampaigns(siteId: string, startDate?: string, endDate?: string, limit = 10, auth?: AuthParams): Promise<CampaignStat[]> {
const params = new URLSearchParams()
if (startDate) params.append('start_date', startDate)
if (endDate) params.append('end_date', endDate)
params.append('limit', limit.toString())
appendAuthParams(params, auth)
return apiRequest<{ campaigns: CampaignStat[] }>(`/public/sites/${siteId}/campaigns?${params.toString()}`).then(r => r?.campaigns || [])
}
export interface DashboardData { export interface DashboardData {
site: Site site: Site
stats: Stats stats: Stats