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 +194
3 changed files with 194 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d5ea1a793b - Show all commits

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

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

@@ -0,0 +1,157 @@
'use client'
import { useState, useEffect } from 'react'
import { formatNumber } from '@/lib/utils/format'
import { Modal } from '@ciphera-net/ui'
import { getCampaigns, CampaignStat } from '@/lib/api/stats'
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)
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)
setFullData(result)
} catch (e) {
console.error(e)
} finally {
setIsLoadingFull(false)
}
}
fetchFullData()
} else {
setFullData([])
}
}, [isModalOpen, siteId, dateRange])
const hasData = data.length > 0
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 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>
<div className="space-y-2 flex-1 min-h-[270px]">
{isLoading ? (
<div className="h-full flex flex-col items-center justify-center">
<p className="text-neutral-500">Loading...</p>
</div>
) : hasData ? (
<>
<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 className="h-full flex flex-col items-center justify-center">
<p className="text-neutral-600 dark:text-neutral-400">No campaign data available</p>
</div>
)}
</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>
</>
)
}

31
lib/api/stats.ts
View File

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