From 90a18c2ba2d08bc9485bb51cf6259314221d19e1 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 30 Jan 2026 14:21:30 +0100
Subject: [PATCH] feat: add export button to private dashboard

---
 app/sites/[id]/page.tsx | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/app/sites/[id]/page.tsx b/app/sites/[id]/page.tsx
index 02bd2f7..42b292e 100644
--- a/app/sites/[id]/page.tsx
+++ b/app/sites/[id]/page.tsx
@@ -8,7 +8,8 @@ import { getStats, getRealtime, getDailyStats, getTopPages, getTopReferrers, get
 import { formatNumber, formatDuration, getDateRange } from '@/lib/utils/format'
 import { toast } from '@ciphera-net/ui'
 import { LoadingOverlay } from '@ciphera-net/ui'
-import { Select, DatePicker } from '@ciphera-net/ui'
+import { Select, DatePicker, DownloadIcon } from '@ciphera-net/ui'
+import ExportModal from '@/components/dashboard/ExportModal'
 import ContentStats from '@/components/dashboard/ContentStats'
 import TopReferrers from '@/components/dashboard/TopReferrers'
 import Locations from '@/components/dashboard/Locations'
@@ -46,6 +47,7 @@ export default function SiteDashboardPage() {
   const [performanceByPage, setPerformanceByPage] = useState<PerformanceByPageStat[] | null>(null)
   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')
 
@@ -173,8 +175,16 @@ export default function SiteDashboardPage() {
             </div>
           </div>
 
-          <div className="flex gap-2">
-            <Select
+            <div className="flex gap-2">
+              <button
+                onClick={() => setIsExportModalOpen(true)}
+                className="hidden md:flex items-center gap-2 px-3 py-2 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-lg text-sm text-neutral-600 dark:text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange transition-colors"
+              >
+                <DownloadIcon className="w-4 h-4" />
+                <span>Export</span>
+              </button>
+
+              <Select
               value={
                 dateRange.start === new Date().toISOString().split('T')[0] && dateRange.end === new Date().toISOString().split('T')[0] 
                 ? 'today' 
@@ -309,6 +319,15 @@ export default function SiteDashboardPage() {
         }}
         initialRange={dateRange}
       />
+
+      <ExportModal
+        isOpen={isExportModalOpen}
+        onClose={() => setIsExportModalOpen(false)}
+        data={dailyStats}
+        stats={stats}
+        topPages={topPages}
+        topReferrers={topReferrers}
+      />
     </div>
   )
 }