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

feat: enhance dashboard components with siteId and dateRange props for improved data fetching and display

Browse Source
This commit is contained in:
Usman Baig
2026-01-30 13:33:04 +01:00
parent a3e6441a33
commit 415f1675a9
5 changed files with 214 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
components/dashboard/TopReferrers.tsx
View File

@@ -1,19 +1,24 @@
'use client'
import { useState } from 'react'
import { useState, useEffect } from 'react'
import { formatNumber } from '@/lib/utils/format'
import { getReferrerIcon } from '@/lib/utils/icons'
import { Modal } from '@ciphera-net/ui'
import { getTopReferrers, TopReferrer } from '@/lib/api/stats'
interface TopReferrersProps {
referrers: Array<{ referrer: string; pageviews: number }>
collectReferrers?: boolean
siteId: string
dateRange: { start: string, end: string }
}
const LIMIT = 7
export default function TopReferrers({ referrers, collectReferrers = true }: TopReferrersProps) {
export default function TopReferrers({ referrers, collectReferrers = true, siteId, dateRange }: TopReferrersProps) {
const [isModalOpen, setIsModalOpen] = useState(false)
const [fullData, setFullData] = useState<TopReferrer[]>([])
const [isLoadingFull, setIsLoadingFull] = useState(false)
// Filter out empty/unknown referrers
const filteredReferrers = (referrers || []).filter(
@@ -25,6 +30,29 @@ export default function TopReferrers({ referrers, collectReferrers = true }: Top
const emptySlots = Math.max(0, LIMIT - displayedReferrers.length)
const showViewAll = hasData && filteredReferrers.length > LIMIT
useEffect(() => {
if (isModalOpen) {
const fetchData = async () => {
setIsLoadingFull(true)
try {
const data = await getTopReferrers(siteId, dateRange.start, dateRange.end, 100)
// Filter fetched data too
const filtered = (data || []).filter(
ref => ref.referrer && ref.referrer !== 'Unknown' && ref.referrer !== ''
)
setFullData(filtered)
} catch (e) {
console.error(e)
} finally {
setIsLoadingFull(false)
}
}
fetchData()
} else {
setFullData([])
}
}, [isModalOpen, siteId, dateRange])
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">
@@ -78,19 +106,23 @@ export default function TopReferrers({ referrers, collectReferrers = true }: Top
title="Top Referrers"
>
<div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
{referrers?.map((ref, index) => (
<div key={index} className="flex items-center justify-between py-2 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">
<div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
<span className="text-lg flex-shrink-0">{getReferrerIcon(ref.referrer)}</span>
<span className="truncate" title={ref.referrer}>{ref.referrer}</span>
{isLoadingFull ? (
<div className="py-4 text-center text-neutral-500">Loading...</div>
) : (
(fullData.length > 0 ? fullData : filteredReferrers).map((ref, index) => (
<div key={index} className="flex items-center justify-between py-2 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">
<div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
<span className="text-lg flex-shrink-0">{getReferrerIcon(ref.referrer)}</span>
<span className="truncate" title={ref.referrer}>{ref.referrer}</span>
</div>
<div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
{formatNumber(ref.pageviews)}
</div>
</div>
<div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
{formatNumber(ref.pageviews)}
</div>
</div>
))}
))
)}
</div>
</Modal>
</>
)
}
}