diff --git a/app/share/[id]/page.tsx b/app/share/[id]/page.tsx
index 1a97e63..fcea382 100644
--- a/app/share/[id]/page.tsx
+++ b/app/share/[id]/page.tsx
@@ -11,8 +11,8 @@ import TopReferrers from '@/components/dashboard/TopReferrers'
import Locations from '@/components/dashboard/Locations'
import TechSpecs from '@/components/dashboard/TechSpecs'
import PerformanceStats from '@/components/dashboard/PerformanceStats'
-import { Select, DatePicker as DatePickerModal, Captcha } from '@ciphera-net/ui'
-import { ZapIcon } from '@ciphera-net/ui'
+import { Select, DatePicker as DatePickerModal, Captcha, DownloadIcon, ZapIcon } from '@ciphera-net/ui'
+import ExportModal from '@/components/dashboard/ExportModal'
// Helper to get date ranges
const getDateRange = (days: number) => {
@@ -45,6 +45,7 @@ export default function PublicDashboardPage() {
// Date range state
const [dateRange, setDateRange] = useState(getDateRange(30))
const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
+ const [isExportModalOpen, setIsExportModalOpen] = useState(false)
const [todayInterval, setTodayInterval] = useState<'minute' | 'hour'>('hour')
const [multiDayInterval, setMultiDayInterval] = useState<'hour' | 'day'>('day')
@@ -294,6 +295,14 @@ export default function PublicDashboardPage() {
+
+
+
+ {data && (
+ setIsExportModalOpen(false)}
+ data={data.daily_stats || []}
+ stats={data.stats}
+ topPages={data.top_pages}
+ topReferrers={data.top_referrers}
+ />
+ )}
)
}
diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index 7bd2d27..e9eb92a 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -14,10 +14,8 @@ import {
} from 'recharts'
import type { TooltipProps } from 'recharts'
import { formatNumber, formatDuration } from '@/lib/utils/format'
-import { ArrowUpRightIcon, ArrowDownRightIcon, DownloadIcon, BarChartIcon } from '@ciphera-net/ui'
-import { Button } from '@ciphera-net/ui'
+import { ArrowUpRightIcon, ArrowDownRightIcon, BarChartIcon } from '@ciphera-net/ui'
import { Checkbox } from '@ciphera-net/ui'
-import ExportModal from './ExportModal'
const COLORS = {
brand: '#FD5E0F',
@@ -164,7 +162,6 @@ function formatAxisValue(value: number): string {
export default function Chart({ data, prevData, stats, prevStats, interval }: ChartProps) {
const [metric, setMetric] = useState('visitors')
const [showComparison, setShowComparison] = useState(false)
- const [isExportModalOpen, setIsExportModalOpen] = useState(false)
const { resolvedTheme } = useTheme()
const colors = useMemo(
@@ -214,10 +211,6 @@ export default function Chart({ data, prevData, stats, prevStats, interval }: Ch
return Math.round(((current - previous) / previous) * 100)
}
- const handleExport = () => {
- setIsExportModalOpen(true)
- }
-
const metrics = [
{
id: 'visitors',
@@ -364,16 +357,6 @@ export default function Chart({ data, prevData, stats, prevStats, interval }: Ch
{/* Vertical Separator */}
-
-
@@ -494,12 +477,6 @@ export default function Chart({ data, prevData, stats, prevStats, interval }: Ch
)}
- setIsExportModalOpen(false)}
- data={data}
- stats={stats}
- />
)
}
diff --git a/components/dashboard/ExportModal.tsx b/components/dashboard/ExportModal.tsx
index cebdca3..bd0da91 100644
--- a/components/dashboard/ExportModal.tsx
+++ b/components/dashboard/ExportModal.tsx
@@ -7,6 +7,7 @@ import jsPDF from 'jspdf'
import autoTable from 'jspdf-autotable'
import type { DailyStat } from './Chart'
import { formatNumber, formatDuration } from '@/lib/utils/format'
+import type { TopPage, TopReferrer } from '@/lib/api/stats'
interface ExportModalProps {
isOpen: boolean
@@ -18,6 +19,8 @@ interface ExportModalProps {
bounce_rate: number
avg_duration: number
}
+ topPages?: TopPage[]
+ topReferrers?: TopReferrer[]
}
type ExportFormat = 'csv' | 'json' | 'xlsx' | 'pdf'
@@ -40,7 +43,7 @@ const loadImage = (src: string): Promise => {
})
}
-export default function ExportModal({ isOpen, onClose, data, stats }: ExportModalProps) {
+export default function ExportModal({ isOpen, onClose, data, stats, topPages, topReferrers }: ExportModalProps) {
const [format, setFormat] = useState('csv')
const [filename, setFilename] = useState(`pulse_export_${new Date().toISOString().split('T')[0]}`)
const [includeHeader, setIncludeHeader] = useState(true)
@@ -171,11 +174,17 @@ export default function ExportModal({ isOpen, onClose, data, stats }: ExportModa
startY = 65 // Move table down
}
+ // Check if data is hourly (same date for multiple rows)
+ const isHourly = data.length > 1 && data[0].date.split('T')[0] === data[1].date.split('T')[0]
+
const tableData = exportData.map(row =>
fields.map(field => {
const val = row[field]
if (field === 'date' && typeof val === 'string') {
- return new Date(val).toLocaleDateString()
+ const date = new Date(val)
+ return isHourly
+ ? date.toLocaleString('en-US', { month: 'numeric', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit' })
+ : date.toLocaleDateString()
}
if (typeof val === 'number') {
if (field === 'bounce_rate') return `${Math.round(val)}%`
@@ -226,6 +235,62 @@ export default function ExportModal({ isOpen, onClose, data, stats }: ExportModa
}
})
+ let finalY = (doc as any).lastAutoTable.finalY + 10
+
+ // Top Pages Table
+ if (topPages && topPages.length > 0) {
+ // Check if we need a new page
+ if (finalY + 40 > doc.internal.pageSize.height) {
+ doc.addPage()
+ finalY = 20
+ }
+
+ doc.setFontSize(14)
+ doc.setTextColor(23, 23, 23)
+ doc.text('Top Pages', 14, finalY)
+ finalY += 5
+
+ const pagesData = topPages.slice(0, 10).map(p => [p.path, formatNumber(p.pageviews)])
+
+ autoTable(doc, {
+ startY: finalY,
+ head: [['Path', 'Pageviews']],
+ body: pagesData,
+ styles: { font: 'helvetica', fontSize: 9, cellPadding: 3 },
+ headStyles: { fillColor: [249, 115, 22], textColor: [255, 255, 255], fontStyle: 'bold' },
+ columnStyles: { 1: { halign: 'right' } },
+ alternateRowStyles: { fillColor: [255, 250, 245] },
+ })
+
+ finalY = (doc as any).lastAutoTable.finalY + 10
+ }
+
+ // Top Referrers Table
+ if (topReferrers && topReferrers.length > 0) {
+ // Check if we need a new page
+ if (finalY + 40 > doc.internal.pageSize.height) {
+ doc.addPage()
+ finalY = 20
+ }
+
+ doc.setFontSize(14)
+ doc.setTextColor(23, 23, 23)
+ doc.text('Top Referrers', 14, finalY)
+ finalY += 5
+
+ const referrersData = topReferrers.slice(0, 10).map(r => [r.referrer, formatNumber(r.pageviews)])
+
+ autoTable(doc, {
+ startY: finalY,
+ head: [['Referrer', 'Pageviews']],
+ body: referrersData,
+ styles: { font: 'helvetica', fontSize: 9, cellPadding: 3 },
+ headStyles: { fillColor: [249, 115, 22], textColor: [255, 255, 255], fontStyle: 'bold' },
+ columnStyles: { 1: { halign: 'right' } },
+ alternateRowStyles: { fillColor: [255, 250, 245] },
+ })
+ }
+
doc.save(`${filename || 'export'}.pdf`)
onClose()
return