Initial commit: Analytics frontend implementation

app/auth/callback/page.tsx

@@ -0,0 +1,139 @@
+'use client'
+
+import { useEffect, useState, Suspense, useRef } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useAuth } from '@/lib/auth/context'
+import { AUTH_URL } from '@/lib/api/client'
+
+function AuthCallbackContent() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const { login } = useAuth()
+  const [error, setError] = useState<string | null>(null)
+  const processedRef = useRef(false)
+
+  useEffect(() => {
+    if (processedRef.current) return
+    
+    const token = searchParams.get('token')
+    const refreshToken = searchParams.get('refresh_token')
+    
+    if (token && refreshToken) {
+        processedRef.current = true
+        try {
+            const payload = JSON.parse(atob(token.split('.')[1]))
+            login(token, refreshToken, {
+                id: payload.sub,
+                email: payload.email || 'user@ciphera.net',
+                totp_enabled: payload.totp_enabled || false
+            })
+            const returnTo = searchParams.get('returnTo') || '/'
+            router.push(returnTo)
+        } catch (e) {
+            setError('Invalid token received')
+        }
+        return
+    }
+
+    const code = searchParams.get('code')
+    const state = searchParams.get('state')
+    
+    if (!code || !state) return
+
+    processedRef.current = true
+
+    const storedState = localStorage.getItem('oauth_state')
+    const codeVerifier = localStorage.getItem('oauth_code_verifier')
+
+    if (state !== storedState) {
+        console.error('State mismatch', { received: state, stored: storedState })
+        setError('Invalid state')
+        return
+    }
+
+    const exchangeCode = async () => {
+      try {
+        const authApiUrl = process.env.NEXT_PUBLIC_AUTH_API_URL || 'http://localhost:8081'
+        const res = await fetch(`${authApiUrl}/oauth/token`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            grant_type: 'authorization_code',
+            code,
+            client_id: 'analytics-app',
+            redirect_uri: window.location.origin + '/auth/callback',
+            code_verifier: codeVerifier,
+          }),
+        })
+
+        if (!res.ok) {
+          const data = await res.json()
+          throw new Error(data.error || 'Failed to exchange token')
+        }
+
+        const data = await res.json()
+        
+        const payload = JSON.parse(atob(data.access_token.split('.')[1]))
+        
+        login(data.access_token, data.refresh_token, {
+            id: payload.sub,
+            email: payload.email || 'user@ciphera.net',
+            totp_enabled: payload.totp_enabled || false
+        })
+        
+        localStorage.removeItem('oauth_state')
+        localStorage.removeItem('oauth_code_verifier')
+        
+        router.push('/')
+      } catch (err: any) {
+        setError(err.message)
+      }
+    }
+
+    exchangeCode()
+  }, [searchParams, login, router])
+
+  if (error) {
+    return (
+      <div className="flex min-h-screen items-center justify-center p-4">
+        <div className="rounded-md bg-red-50 dark:bg-red-900/20 p-4 text-red-500">
+          Error: {error}
+          <div className="mt-4">
+            <button 
+                onClick={() => window.location.href = `${AUTH_URL}/login`}
+                className="text-sm underline"
+            >
+                Back to Login
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center p-4">
+      <div className="text-center">
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-neutral-200 border-t-neutral-800 mx-auto mb-4"></div>
+        <p className="text-neutral-600 dark:text-neutral-400">Completing sign in...</p>
+      </div>
+    </div>
+  )
+}
+
+export default function AuthCallback() {
+  return (
+    <Suspense fallback={
+      <div className="flex min-h-screen items-center justify-center p-4">
+        <div className="text-center">
+          <div className="h-8 w-8 animate-spin rounded-full border-4 border-neutral-200 border-t-neutral-800 mx-auto mb-4"></div>
+          <p className="text-neutral-600 dark:text-neutral-400">Loading...</p>
+        </div>
+      </div>
+    }>
+      <AuthCallbackContent />
+    </Suspense>
+  )
+}

app/layout.tsx

@@ -0,0 +1,56 @@
+import Header from '@ciphera-net/ui/Header'
+import Footer from '@ciphera-net/ui/Footer'
+import { AuthProvider } from '@/lib/auth/context'
+import { ThemeProviders } from '@ciphera-net/ui'
+import { Toaster } from 'sonner'
+import type { Metadata } from 'next'
+import { Plus_Jakarta_Sans } from 'next/font/google'
+import '../styles/globals.css'
+
+const plusJakartaSans = Plus_Jakarta_Sans({
+  subsets: ['latin'],
+  variable: '--font-plus-jakarta-sans',
+  display: 'swap',
+})
+
+export const metadata: Metadata = {
+  title: 'Ciphera Analytics - Privacy-First Web Analytics',
+  description: 'Simple, privacy-focused web analytics. No cookies, no tracking. GDPR compliant.',
+  keywords: ['analytics', 'privacy', 'web analytics', 'ciphera', 'GDPR'],
+  authors: [{ name: 'Ciphera' }],
+  creator: 'Ciphera',
+  publisher: 'Ciphera',
+  icons: {
+    icon: '/ciphera_icon_no_margins.png',
+    shortcut: '/ciphera_icon_no_margins.png',
+    apple: '/ciphera_icon_no_margins.png',
+  },
+  robots: {
+    index: true,
+    follow: true,
+  },
+  themeColor: '#FD5E0F',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className={plusJakartaSans.variable} suppressHydrationWarning>
+      <body className="antialiased min-h-screen flex flex-col bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-50">
+        <ThemeProviders>
+          <AuthProvider>
+            <Header />
+            <main className="flex-1 pt-24 pb-8">
+              {children}
+            </main>
+            <Footer />
+            <Toaster position="top-center" richColors closeButton />
+          </AuthProvider>
+        </ThemeProviders>
+      </body>
+    </html>
+  )
+}

app/page.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+import { useAuth } from '@/lib/auth/context'
+import { listSites } from '@/lib/api/sites'
+import type { Site } from '@/lib/api/sites'
+import LoadingOverlay from '@/components/LoadingOverlay'
+import SiteList from '@/components/sites/SiteList'
+
+export default function HomePage() {
+  const { user, loading } = useAuth()
+  const router = useRouter()
+
+  useEffect(() => {
+    if (!loading && !user) {
+      router.push('/login')
+    }
+  }, [user, loading, router])
+
+  if (loading) {
+    return <LoadingOverlay logoSrc="/ciphera_icon_no_margins.png" title="Ciphera Analytics" />
+  }
+
+  if (!user) {
+    return null
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-neutral-900 dark:text-white mb-2">
+          Your Sites
+        </h1>
+        <p className="text-neutral-600 dark:text-neutral-400">
+          Manage your analytics sites and view insights
+        </p>
+      </div>
+      <SiteList />
+    </div>
+  )
+}

app/sites/[id]/page.tsx

@@ -0,0 +1,140 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import { getSite, type Site } from '@/lib/api/sites'
+import { getStats, getRealtime, getDailyStats, getTopPages, getTopReferrers, getCountries } from '@/lib/api/stats'
+import { formatNumber, getDateRange } from '@/lib/utils/format'
+import { toast } from 'sonner'
+import LoadingOverlay from '@/components/LoadingOverlay'
+import StatsCard from '@/components/dashboard/StatsCard'
+import RealtimeVisitors from '@/components/dashboard/RealtimeVisitors'
+import TopPages from '@/components/dashboard/TopPages'
+import TopReferrers from '@/components/dashboard/TopReferrers'
+import Countries from '@/components/dashboard/Countries'
+import Chart from '@/components/dashboard/Chart'
+
+export default function SiteDashboardPage() {
+  const params = useParams()
+  const router = useRouter()
+  const siteId = params.id as string
+
+  const [site, setSite] = useState<Site | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [stats, setStats] = useState({ pageviews: 0, visitors: 0 })
+  const [realtime, setRealtime] = useState(0)
+  const [dailyStats, setDailyStats] = useState<any[]>([])
+  const [topPages, setTopPages] = useState<any[]>([])
+  const [topReferrers, setTopReferrers] = useState<any[]>([])
+  const [countries, setCountries] = useState<any[]>([])
+  const [dateRange, setDateRange] = useState(getDateRange(30))
+
+  useEffect(() => {
+    loadData()
+    const interval = setInterval(() => {
+      loadRealtime()
+    }, 30000) // Update every 30 seconds
+    return () => clearInterval(interval)
+  }, [siteId, dateRange])
+
+  const loadData = async () => {
+    try {
+      setLoading(true)
+      const [siteData, statsData, realtimeData, dailyData, pagesData, referrersData, countriesData] = await Promise.all([
+        getSite(siteId),
+        getStats(siteId, dateRange.start, dateRange.end),
+        getRealtime(siteId),
+        getDailyStats(siteId, dateRange.start, dateRange.end),
+        getTopPages(siteId, dateRange.start, dateRange.end, 10),
+        getTopReferrers(siteId, dateRange.start, dateRange.end, 10),
+        getCountries(siteId, dateRange.start, dateRange.end, 10),
+      ])
+      setSite(siteData)
+      setStats(statsData)
+      setRealtime(realtimeData.visitors)
+      setDailyStats(dailyData)
+      setTopPages(pagesData)
+      setTopReferrers(referrersData)
+      setCountries(countriesData)
+    } catch (error: any) {
+      toast.error('Failed to load data: ' + (error.message || 'Unknown error'))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const loadRealtime = async () => {
+    try {
+      const data = await getRealtime(siteId)
+      setRealtime(data.visitors)
+    } catch (error) {
+      // Silently fail for realtime updates
+    }
+  }
+
+  if (loading) {
+    return <LoadingOverlay logoSrc="/ciphera_icon_no_margins.png" title="Ciphera Analytics" />
+  }
+
+  if (!site) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <p className="text-neutral-600 dark:text-neutral-400">Site not found</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="mb-8">
+        <div className="flex items-center justify-between mb-4">
+          <div>
+            <h1 className="text-3xl font-bold text-neutral-900 dark:text-white mb-2">
+              {site.name}
+            </h1>
+            <p className="text-neutral-600 dark:text-neutral-400">
+              {site.domain}
+            </p>
+          </div>
+          <div className="flex gap-2">
+            <select
+              value={dateRange.start === getDateRange(7).start ? '7' : dateRange.start === getDateRange(30).start ? '30' : 'custom'}
+              onChange={(e) => {
+                if (e.target.value === '7') setDateRange(getDateRange(7))
+                else if (e.target.value === '30') setDateRange(getDateRange(30))
+              }}
+              className="btn-secondary text-sm"
+            >
+              <option value="7">Last 7 days</option>
+              <option value="30">Last 30 days</option>
+              <option value="custom">Custom</option>
+            </select>
+            <button
+              onClick={() => router.push(`/sites/${siteId}/settings`)}
+              className="btn-secondary text-sm"
+            >
+              Settings
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4 mb-8">
+        <StatsCard title="Pageviews" value={formatNumber(stats.pageviews)} />
+        <StatsCard title="Visitors" value={formatNumber(stats.visitors)} />
+        <RealtimeVisitors count={realtime} />
+        <StatsCard title="Bounce Rate" value="-" />
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-2 mb-8">
+        <Chart data={dailyStats} />
+        <TopPages pages={topPages} />
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        <TopReferrers referrers={topReferrers} />
+        <Countries countries={countries} />
+      </div>
+    </div>
+  )
+}

app/sites/[id]/settings/page.tsx

@@ -0,0 +1,154 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import { getSite, updateSite, type Site } from '@/lib/api/sites'
+import { toast } from 'sonner'
+import LoadingOverlay from '@/components/LoadingOverlay'
+import { APP_URL } from '@/lib/api/client'
+
+export default function SiteSettingsPage() {
+  const params = useParams()
+  const router = useRouter()
+  const siteId = params.id as string
+
+  const [site, setSite] = useState<Site | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [formData, setFormData] = useState({
+    name: '',
+  })
+  const [scriptCopied, setScriptCopied] = useState(false)
+
+  useEffect(() => {
+    loadSite()
+  }, [siteId])
+
+  const loadSite = async () => {
+    try {
+      setLoading(true)
+      const data = await getSite(siteId)
+      setSite(data)
+      setFormData({ name: data.name })
+    } catch (error: any) {
+      toast.error('Failed to load site: ' + (error.message || 'Unknown error'))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setSaving(true)
+
+    try {
+      await updateSite(siteId, formData)
+      toast.success('Site updated successfully')
+      loadSite()
+    } catch (error: any) {
+      toast.error('Failed to update site: ' + (error.message || 'Unknown error'))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const copyScript = () => {
+    const script = `<script defer data-domain="${site?.domain}" src="${APP_URL}/script.js"></script>`
+    navigator.clipboard.writeText(script)
+    setScriptCopied(true)
+    toast.success('Script copied to clipboard')
+    setTimeout(() => setScriptCopied(false), 2000)
+  }
+
+  if (loading) {
+    return <LoadingOverlay logoSrc="/ciphera_icon_no_margins.png" title="Ciphera Analytics" />
+  }
+
+  if (!site) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <p className="text-neutral-600 dark:text-neutral-400">Site not found</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-8 max-w-2xl">
+      <h1 className="text-3xl font-bold mb-8 text-neutral-900 dark:text-white">
+        Site Settings
+      </h1>
+
+      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6 mb-6">
+        <h2 className="text-xl font-semibold mb-4 text-neutral-900 dark:text-white">
+          Tracking Script
+        </h2>
+        <p className="text-sm text-neutral-600 dark:text-neutral-400 mb-4">
+          Add this script to your website to start tracking visitors.
+        </p>
+        <div className="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-4 mb-4">
+          <code className="text-sm text-neutral-900 dark:text-white break-all">
+            {`<script defer data-domain="${site.domain}" src="${APP_URL}/script.js"></script>`}
+          </code>
+        </div>
+        <button
+          onClick={copyScript}
+          className="btn-primary"
+        >
+          {scriptCopied ? 'Copied!' : 'Copy Script'}
+        </button>
+      </div>
+
+      <form onSubmit={handleSubmit} className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6">
+        <h2 className="text-xl font-semibold mb-4 text-neutral-900 dark:text-white">
+          Site Information
+        </h2>
+
+        <div className="mb-4">
+          <label htmlFor="name" className="block text-sm font-medium mb-2 text-neutral-900 dark:text-white">
+            Site Name
+          </label>
+          <input
+            type="text"
+            id="name"
+            required
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            className="w-full px-4 py-2 border border-neutral-300 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white focus:ring-2 focus:ring-brand-orange focus:border-transparent"
+          />
+        </div>
+
+        <div className="mb-6">
+          <label className="block text-sm font-medium mb-2 text-neutral-900 dark:text-white">
+            Domain
+          </label>
+          <input
+            type="text"
+            value={site.domain}
+            disabled
+            className="w-full px-4 py-2 border border-neutral-300 dark:border-neutral-700 rounded-lg bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 cursor-not-allowed"
+          />
+          <p className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
+            Domain cannot be changed after creation
+          </p>
+        </div>
+
+        <div className="flex gap-4">
+          <button
+            type="submit"
+            disabled={saving}
+            className="btn-primary disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {saving ? 'Saving...' : 'Save Changes'}
+          </button>
+          <button
+            type="button"
+            onClick={() => router.back()}
+            className="btn-secondary"
+          >
+            Cancel
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+}

app/sites/new/page.tsx

@@ -0,0 +1,90 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { createSite } from '@/lib/api/sites'
+import { toast } from 'sonner'
+
+export default function NewSitePage() {
+  const router = useRouter()
+  const [loading, setLoading] = useState(false)
+  const [formData, setFormData] = useState({
+    name: '',
+    domain: '',
+  })
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+
+    try {
+      const site = await createSite(formData)
+      toast.success('Site created successfully')
+      router.push(`/sites/${site.id}`)
+    } catch (error: any) {
+      toast.error('Failed to create site: ' + (error.message || 'Unknown error'))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-8 max-w-2xl">
+      <h1 className="text-3xl font-bold mb-8 text-neutral-900 dark:text-white">
+        Create New Site
+      </h1>
+
+      <form onSubmit={handleSubmit} className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6">
+        <div className="mb-4">
+          <label htmlFor="name" className="block text-sm font-medium mb-2 text-neutral-900 dark:text-white">
+            Site Name
+          </label>
+          <input
+            type="text"
+            id="name"
+            required
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            className="w-full px-4 py-2 border border-neutral-300 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white focus:ring-2 focus:ring-brand-orange focus:border-transparent"
+            placeholder="My Website"
+          />
+        </div>
+
+        <div className="mb-6">
+          <label htmlFor="domain" className="block text-sm font-medium mb-2 text-neutral-900 dark:text-white">
+            Domain
+          </label>
+          <input
+            type="text"
+            id="domain"
+            required
+            value={formData.domain}
+            onChange={(e) => setFormData({ ...formData, domain: e.target.value.toLowerCase().trim() })}
+            className="w-full px-4 py-2 border border-neutral-300 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white focus:ring-2 focus:ring-brand-orange focus:border-transparent"
+            placeholder="example.com"
+          />
+          <p className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
+            Enter your domain without http:// or https://
+          </p>
+        </div>
+
+        <div className="flex gap-4">
+          <button
+            type="submit"
+            disabled={loading}
+            className="btn-primary disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {loading ? 'Creating...' : 'Create Site'}
+          </button>
+          <button
+            type="button"
+            onClick={() => router.back()}
+            className="btn-secondary"
+          >
+            Cancel
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+}