Initial commit: Analytics frontend implementation

2026-01-16 13:14:19 +01:00
commit 8e10a05eb1
28 changed files with 1778 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
--- a/README.md
+++ b/README.md
@@ -0,0 +1,76 @@
+# Analytics Frontend
+
+[![License: Proprietary](https://img.shields.io/badge/License-Proprietary-red.svg)](#)
+[![Built with Next.js](https://img.shields.io/badge/Built%20with-Next.js-blue.svg?logo=next.js&logoColor=white)](https://nextjs.org/)
+
+Analytics Frontend is the dashboard interface for Ciphera Analytics. It provides a simple, intuitive interface for managing sites and viewing analytics data.
+
+## Features
+
+- **Privacy-First Dashboard**: Simple, clean interface for viewing analytics
+- **Site Management**: Create, edit, and delete sites
+- **Real-time Stats**: Live visitor counts and real-time updates
+- **Analytics Views**: Pageviews, visitors, top pages, referrers, countries
+- **Dark Mode**: Full dark mode support
+- **Responsive Design**: Works on desktop and mobile
+
+## Technology Stack
+
+- **Framework**: Next.js 16+ (App Router)
+- **Styling**: Tailwind CSS with Ciphera design tokens
+- **Charts**: Recharts for data visualization
+- **Authentication**: OAuth flow with ciphera-auth
+- **UI Components**: @ciphera-net/ui for shared components
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 18+
+- npm or yarn
+
+### Installation
+
+1. Install dependencies:
+```bash
+npm install
+```
+
+2. Set up environment variables (create `.env.local` file):
+```env
+NEXT_PUBLIC_API_URL=http://localhost:8082
+NEXT_PUBLIC_AUTH_URL=http://localhost:3000
+NEXT_PUBLIC_AUTH_API_URL=http://localhost:8081
+NEXT_PUBLIC_APP_URL=http://localhost:3003
+```
+
+3. Run the development server:
+```bash
+npm run dev
+```
+
+4. Open [http://localhost:3003](http://localhost:3003) in your browser.
+
+### Build for Production
+
+```bash
+npm run build
+npm start
+```
+
+## Design System
+
+The frontend follows the Ciphera design language:
+
+- **Brand Color**: Orange (#FD5E0F) - used as accent only
+- **Neutral Colors**: Full scale (50-900) for UI elements
+- **Dark Mode**: Full support with class-based switching
+- **Font**: Plus Jakarta Sans
+- **Design Patterns**: 
+  - Rounded corners (rounded-xl, rounded-3xl)
+  - Smooth transitions (duration-200, duration-300)
+  - Shadow effects with brand-orange accents
+
+## License
+
+Proprietary - All rights reserved
--- a/app/auth/callback/page.tsx
+++ b/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>
+  )
+}
--- a/app/layout.tsx
+++ b/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>
+  )
+}
--- a/app/page.tsx
+++ b/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>
+  )
+}
--- a/app/sites/[id]/page.tsx
+++ b/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>
+  )
+}
--- a/app/sites/[id]/settings/page.tsx
+++ b/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>
+  )
+}
--- a/app/sites/new/page.tsx
+++ b/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>
+  )
+}
--- a/components/LoadingOverlay.tsx
+++ b/components/LoadingOverlay.tsx
@@ -0,0 +1,28 @@
+'use client'
+
+import Image from 'next/image'
+
+interface LoadingOverlayProps {
+  logoSrc: string
+  title: string
+}
+
+export default function LoadingOverlay({ logoSrc, title }: LoadingOverlayProps) {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-white/80 dark:bg-neutral-950/80 backdrop-blur-sm">
+      <div className="text-center">
+        <div className="mb-4 flex justify-center">
+          <Image
+            src={logoSrc}
+            alt={title}
+            width={64}
+            height={64}
+            className="animate-pulse"
+          />
+        </div>
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-neutral-200 border-t-brand-orange mx-auto mb-4"></div>
+        <p className="text-neutral-600 dark:text-neutral-400">Loading...</p>
+      </div>
+    </div>
+  )
+}
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -0,0 +1,44 @@
+'use client'
+
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'
+
+interface ChartProps {
+  data: Array<{ date: string; pageviews: number; visitors: number }>
+}
+
+export default function Chart({ data }: ChartProps) {
+  const chartData = data.map(item => ({
+    date: new Date(item.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
+    pageviews: item.pageviews,
+    visitors: item.visitors,
+  }))
+
+  return (
+    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6">
+      <h3 className="text-lg font-semibold mb-4 text-neutral-900 dark:text-white">
+        Pageviews Over Time
+      </h3>
+      <ResponsiveContainer width="100%" height={300}>
+        <LineChart data={chartData}>
+          <CartesianGrid strokeDasharray="3 3" stroke="#e5e5e5" />
+          <XAxis dataKey="date" stroke="#737373" />
+          <YAxis stroke="#737373" />
+          <Tooltip
+            contentStyle={{
+              backgroundColor: 'white',
+              border: '1px solid #e5e5e5',
+              borderRadius: '8px',
+            }}
+          />
+          <Line
+            type="monotone"
+            dataKey="pageviews"
+            stroke="#FD5E0F"
+            strokeWidth={2}
+            dot={{ fill: '#FD5E0F' }}
+          />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}
--- a/components/dashboard/Countries.tsx
+++ b/components/dashboard/Countries.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+import { formatNumber } from '@/lib/utils/format'
+
+interface CountriesProps {
+  countries: Array<{ country: string; pageviews: number }>
+}
+
+export default function Countries({ countries }: CountriesProps) {
+  if (countries.length === 0) {
+    return (
+      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6">
+        <h3 className="text-lg font-semibold mb-4 text-neutral-900 dark:text-white">
+          Countries
+        </h3>
+        <p className="text-neutral-600 dark:text-neutral-400">No data available</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6">
+      <h3 className="text-lg font-semibold mb-4 text-neutral-900 dark:text-white">
+        Countries
+      </h3>
+      <div className="space-y-3">
+        {countries.map((country, index) => (
+          <div key={index} className="flex items-center justify-between">
+            <div className="flex-1 truncate text-neutral-900 dark:text-white">
+              {country.country}
+            </div>
+            <div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
+              {formatNumber(country.pageviews)}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
--- a/components/dashboard/RealtimeVisitors.tsx
+++ b/components/dashboard/RealtimeVisitors.tsx
@@ -0,0 +1,21 @@
+'use client'
+
+interface RealtimeVisitorsProps {
+  count: number
+}
+
+export default function RealtimeVisitors({ count }: RealtimeVisitorsProps) {
+  return (
+    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6">
+      <div className="flex items-center justify-between mb-2">
+        <div className="text-sm text-neutral-600 dark:text-neutral-400">
+          Real-time Visitors
+        </div>
+        <div className="h-2 w-2 bg-green-500 rounded-full animate-pulse"></div>
+      </div>
+      <div className="text-3xl font-bold text-neutral-900 dark:text-white">
+        {count}
+      </div>
+    </div>
+  )
+}
--- a/components/dashboard/StatsCard.tsx
+++ b/components/dashboard/StatsCard.tsx
@@ -0,0 +1,19 @@
+'use client'
+
+interface StatsCardProps {
+  title: string
+  value: string
+}
+
+export default function StatsCard({ title, value }: StatsCardProps) {
+  return (
+    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6">
+      <div className="text-sm text-neutral-600 dark:text-neutral-400 mb-2">
+        {title}
+      </div>
+      <div className="text-3xl font-bold text-neutral-900 dark:text-white">
+        {value}
+      </div>
+    </div>
+  )
+}
--- a/components/dashboard/TopPages.tsx
+++ b/components/dashboard/TopPages.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+import { formatNumber } from '@/lib/utils/format'
+
+interface TopPagesProps {
+  pages: Array<{ path: string; pageviews: number }>
+}
+
+export default function TopPages({ pages }: TopPagesProps) {
+  if (pages.length === 0) {
+    return (
+      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6">
+        <h3 className="text-lg font-semibold mb-4 text-neutral-900 dark:text-white">
+          Top Pages
+        </h3>
+        <p className="text-neutral-600 dark:text-neutral-400">No data available</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6">
+      <h3 className="text-lg font-semibold mb-4 text-neutral-900 dark:text-white">
+        Top Pages
+      </h3>
+      <div className="space-y-3">
+        {pages.map((page, index) => (
+          <div key={index} className="flex items-center justify-between">
+            <div className="flex-1 truncate text-neutral-900 dark:text-white">
+              {page.path}
+            </div>
+            <div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
+              {formatNumber(page.pageviews)}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
--- a/components/dashboard/TopReferrers.tsx
+++ b/components/dashboard/TopReferrers.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+import { formatNumber } from '@/lib/utils/format'
+
+interface TopReferrersProps {
+  referrers: Array<{ referrer: string; pageviews: number }>
+}
+
+export default function TopReferrers({ referrers }: TopReferrersProps) {
+  if (referrers.length === 0) {
+    return (
+      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6">
+        <h3 className="text-lg font-semibold mb-4 text-neutral-900 dark:text-white">
+          Top Referrers
+        </h3>
+        <p className="text-neutral-600 dark:text-neutral-400">No data available</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6">
+      <h3 className="text-lg font-semibold mb-4 text-neutral-900 dark:text-white">
+        Top Referrers
+      </h3>
+      <div className="space-y-3">
+        {referrers.map((ref, index) => (
+          <div key={index} className="flex items-center justify-between">
+            <div className="flex-1 truncate text-neutral-900 dark:text-white">
+              {ref.referrer}
+            </div>
+            <div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
+              {formatNumber(ref.pageviews)}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
--- a/components/sites/SiteList.tsx
+++ b/components/sites/SiteList.tsx
@@ -0,0 +1,102 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { listSites, deleteSite, type Site } from '@/lib/api/sites'
+import { toast } from 'sonner'
+import LoadingOverlay from '../LoadingOverlay'
+
+export default function SiteList() {
+  const [sites, setSites] = useState<Site[]>([])
+  const [loading, setLoading] = useState(true)
+  const router = useRouter()
+
+  useEffect(() => {
+    loadSites()
+  }, [])
+
+  const loadSites = async () => {
+    try {
+      setLoading(true)
+      const data = await listSites()
+      setSites(data)
+    } catch (error: any) {
+      toast.error('Failed to load sites: ' + (error.message || 'Unknown error'))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleDelete = async (id: string) => {
+    if (!confirm('Are you sure you want to delete this site? This action cannot be undone.')) {
+      return
+    }
+
+    try {
+      await deleteSite(id)
+      toast.success('Site deleted successfully')
+      loadSites()
+    } catch (error: any) {
+      toast.error('Failed to delete site: ' + (error.message || 'Unknown error'))
+    }
+  }
+
+  if (loading) {
+    return <LoadingOverlay logoSrc="/ciphera_icon_no_margins.png" title="Ciphera Analytics" />
+  }
+
+  if (sites.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-neutral-600 dark:text-neutral-400 mb-4">No sites yet. Create your first site to get started.</p>
+        <button
+          onClick={() => router.push('/sites/new')}
+          className="btn-primary"
+        >
+          Create Site
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+      {sites.map((site) => (
+        <div
+          key={site.id}
+          className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6 hover:shadow-lg transition-shadow"
+        >
+          <h3 className="text-xl font-semibold mb-2 text-neutral-900 dark:text-white">
+            {site.name}
+          </h3>
+          <p className="text-sm text-neutral-600 dark:text-neutral-400 mb-4">
+            {site.domain}
+          </p>
+          <div className="flex gap-2">
+            <button
+              onClick={() => router.push(`/sites/${site.id}`)}
+              className="btn-primary flex-1 text-sm"
+            >
+              View Dashboard
+            </button>
+            <button
+              onClick={() => handleDelete(site.id)}
+              className="btn-secondary text-sm px-4"
+            >
+              Delete
+            </button>
+          </div>
+        </div>
+      ))}
+      <button
+        onClick={() => router.push('/sites/new')}
+        className="bg-white dark:bg-neutral-900 border-2 border-dashed border-neutral-300 dark:border-neutral-700 rounded-xl p-6 hover:border-brand-orange transition-colors text-neutral-600 dark:text-neutral-400"
+      >
+        <div className="text-center">
+          <div className="text-2xl mb-2">+</div>
+          <div>Add New Site</div>
+        </div>
+      </button>
+    </div>
+  )
+}
--- a/lib/api/client.ts
+++ b/lib/api/client.ts
@@ -0,0 +1,164 @@
+/**
+ * HTTP client wrapper for API calls
+ */
+
+export const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8082'
+export const AUTH_URL = process.env.NEXT_PUBLIC_AUTH_URL || 'http://localhost:3000'
+export const APP_URL = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3003'
+export const AUTH_API_URL = process.env.NEXT_PUBLIC_AUTH_API_URL || 'http://localhost:8081'
+
+export function getLoginUrl(redirectPath = '/auth/callback') {
+  const redirectUri = encodeURIComponent(`${APP_URL}${redirectPath}`)
+  return `${AUTH_URL}/login?client_id=analytics-app&redirect_uri=${redirectUri}&response_type=code`
+}
+
+export function getSignupUrl(redirectPath = '/auth/callback') {
+  const redirectUri = encodeURIComponent(`${APP_URL}${redirectPath}`)
+  return `${AUTH_URL}/signup?client_id=analytics-app&redirect_uri=${redirectUri}&response_type=code`
+}
+
+export class ApiError extends Error {
+  status: number
+  constructor(message: string, status: number) {
+    super(message)
+    this.status = status
+  }
+}
+
+// * Mutex for token refresh
+let isRefreshing = false
+let refreshSubscribers: ((token: string) => void)[] = []
+
+function subscribeToTokenRefresh(cb: (token: string) => void) {
+  refreshSubscribers.push(cb)
+}
+
+function onRefreshed(token: string) {
+  refreshSubscribers.map((cb) => cb(token))
+  refreshSubscribers = []
+}
+
+/**
+ * Base API client with error handling
+ */
+async function apiRequest<T>(
+  endpoint: string,
+  options: RequestInit = {}
+): Promise<T> {
+  // * Determine base URL
+  const isAuthRequest = endpoint.startsWith('/auth')
+  const baseUrl = isAuthRequest ? AUTH_API_URL : API_URL
+  const url = `${baseUrl}/api/v1${endpoint}`
+  
+  const headers: HeadersInit = {
+    'Content-Type': 'application/json',
+    ...options.headers,
+  }
+
+  // Inject Auth Token if available (Client-side only)
+  if (typeof window !== 'undefined') {
+    const token = localStorage.getItem('token')
+    if (token) {
+      (headers as any)['Authorization'] = `Bearer ${token}`
+    }
+  }
+
+  const response = await fetch(url, {
+    ...options,
+    headers,
+  })
+
+  if (!response.ok) {
+    if (response.status === 401) {
+      // * Attempt Token Refresh if 401
+      if (typeof window !== 'undefined') {
+        const refreshToken = localStorage.getItem('refreshToken')
+        
+        // * Prevent infinite loop: Don't refresh if the failed request WAS a refresh request
+        if (refreshToken && !endpoint.includes('/auth/refresh')) {
+          if (isRefreshing) {
+            // * If refresh is already in progress, wait for it to complete
+            return new Promise((resolve, reject) => {
+              subscribeToTokenRefresh(async (newToken) => {
+                // Retry original request with new token
+                const newHeaders = {
+                  ...headers,
+                  'Authorization': `Bearer ${newToken}`,
+                }
+                try {
+                  const retryResponse = await fetch(url, {
+                    ...options,
+                    headers: newHeaders,
+                  })
+                  if (retryResponse.ok) {
+                    resolve(retryResponse.json())
+                  } else {
+                    reject(new ApiError('Retry failed', retryResponse.status))
+                  }
+                } catch (e) {
+                  reject(e)
+                }
+              })
+            })
+          }
+
+          isRefreshing = true
+
+          try {
+            const refreshRes = await fetch(`${AUTH_API_URL}/api/v1/auth/refresh`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ 
+                  refresh_token: refreshToken,
+              }),
+            })
+
+            if (refreshRes.ok) {
+              const data = await refreshRes.json()
+              localStorage.setItem('token', data.access_token)
+              localStorage.setItem('refreshToken', data.refresh_token) // Rotation
+              
+              // Notify waiting requests
+              onRefreshed(data.access_token)
+
+              // * Retry original request with new token
+              const newHeaders = {
+                ...headers,
+                'Authorization': `Bearer ${data.access_token}`,
+              }
+              const retryResponse = await fetch(url, {
+                ...options,
+                headers: newHeaders,
+              })
+              
+              if (retryResponse.ok) {
+                return retryResponse.json()
+              }
+            } else {
+              // * Refresh failed, logout
+              localStorage.removeItem('token')
+              localStorage.removeItem('refreshToken')
+              localStorage.removeItem('user')
+            }
+          } catch (e) {
+            // * Network error during refresh
+            throw e
+          } finally {
+            isRefreshing = false
+          }
+        }
+      }
+    }
+
+    const errorBody = await response.json().catch(() => ({
+      error: 'Unknown error',
+      message: `HTTP ${response.status}: ${response.statusText}`,
+    }))
+    throw new ApiError(errorBody.message || errorBody.error || 'Request failed', response.status)
+  }
+
+  return response.json()
+}
+
+export const authFetch = apiRequest
+export default apiRequest
--- a/lib/api/sites.ts
+++ b/lib/api/sites.ts
@@ -0,0 +1,48 @@
+import apiRequest from './client'
+
+export interface Site {
+  id: string
+  user_id: string
+  domain: string
+  name: string
+  created_at: string
+  updated_at: string
+}
+
+export interface CreateSiteRequest {
+  domain: string
+  name: string
+}
+
+export interface UpdateSiteRequest {
+  name: string
+}
+
+export async function listSites(): Promise<Site[]> {
+  const response = await apiRequest<{ sites: Site[] }>('/sites')
+  return response.sites
+}
+
+export async function getSite(id: string): Promise<Site> {
+  return apiRequest<Site>(`/sites/${id}`)
+}
+
+export async function createSite(data: CreateSiteRequest): Promise<Site> {
+  return apiRequest<Site>('/sites', {
+    method: 'POST',
+    body: JSON.stringify(data),
+  })
+}
+
+export async function updateSite(id: string, data: UpdateSiteRequest): Promise<Site> {
+  return apiRequest<Site>(`/sites/${id}`, {
+    method: 'PUT',
+    body: JSON.stringify(data),
+  })
+}
+
+export async function deleteSite(id: string): Promise<void> {
+  await apiRequest(`/sites/${id}`, {
+    method: 'DELETE',
+  })
+}
--- a/lib/api/stats.ts
+++ b/lib/api/stats.ts
@@ -0,0 +1,74 @@
+import apiRequest from './client'
+
+export interface Stats {
+  pageviews: number
+  visitors: number
+}
+
+export interface TopPage {
+  path: string
+  pageviews: number
+}
+
+export interface TopReferrer {
+  referrer: string
+  pageviews: number
+}
+
+export interface CountryStat {
+  country: string
+  pageviews: number
+}
+
+export interface DailyStat {
+  date: string
+  pageviews: number
+  visitors: number
+}
+
+export interface RealtimeStats {
+  visitors: number
+}
+
+export async function getStats(siteId: string, startDate?: string, endDate?: string): Promise<Stats> {
+  const params = new URLSearchParams()
+  if (startDate) params.append('start_date', startDate)
+  if (endDate) params.append('end_date', endDate)
+  const query = params.toString()
+  return apiRequest<Stats>(`/sites/${siteId}/stats${query ? `?${query}` : ''}`)
+}
+
+export async function getRealtime(siteId: string): Promise<RealtimeStats> {
+  return apiRequest<RealtimeStats>(`/sites/${siteId}/realtime`)
+}
+
+export async function getTopPages(siteId: string, startDate?: string, endDate?: string, limit = 10): Promise<TopPage[]> {
+  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<{ pages: TopPage[] }>(`/sites/${siteId}/pages?${params.toString()}`).then(r => r.pages)
+}
+
+export async function getTopReferrers(siteId: string, startDate?: string, endDate?: string, limit = 10): Promise<TopReferrer[]> {
+  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<{ referrers: TopReferrer[] }>(`/sites/${siteId}/referrers?${params.toString()}`).then(r => r.referrers)
+}
+
+export async function getCountries(siteId: string, startDate?: string, endDate?: string, limit = 10): Promise<CountryStat[]> {
+  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<{ countries: CountryStat[] }>(`/sites/${siteId}/countries?${params.toString()}`).then(r => r.countries)
+}
+
+export async function getDailyStats(siteId: string, startDate?: string, endDate?: string): Promise<DailyStat[]> {
+  const params = new URLSearchParams()
+  if (startDate) params.append('start_date', startDate)
+  if (endDate) params.append('end_date', endDate)
+  return apiRequest<{ stats: DailyStat[] }>(`/sites/${siteId}/daily?${params.toString()}`).then(r => r.stats)
+}
--- a/lib/auth/context.tsx
+++ b/lib/auth/context.tsx
@@ -0,0 +1,114 @@
+'use client'
+
+import React, { createContext, useContext, useEffect, useState, useCallback } from 'react'
+import { useRouter } from 'next/navigation'
+import apiRequest from '@/lib/api/client'
+import LoadingOverlay from '@/components/LoadingOverlay'
+
+interface User {
+  id: string
+  email: string
+  totp_enabled: boolean
+}
+
+interface AuthContextType {
+  user: User | null
+  loading: boolean
+  login: (token: string, refreshToken: string, user: User) => void
+  logout: () => void
+  refresh: () => Promise<void>
+  refreshSession: () => Promise<void>
+}
+
+const AuthContext = createContext<AuthContextType>({
+  user: null,
+  loading: true,
+  login: () => {},
+  logout: () => {},
+  refresh: async () => {},
+  refreshSession: async () => {},
+})
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [user, setUser] = useState<User | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [isLoggingOut, setIsLoggingOut] = useState(false)
+  const router = useRouter()
+
+  const login = (token: string, refreshToken: string, userData: User) => {
+    localStorage.setItem('token', token)
+    localStorage.setItem('refreshToken', refreshToken)
+    localStorage.setItem('user', JSON.stringify(userData))
+    setUser(userData)
+    router.refresh()
+  }
+
+  const logout = useCallback(() => {
+    setIsLoggingOut(true)
+    localStorage.removeItem('token')
+    localStorage.removeItem('refreshToken')
+    localStorage.removeItem('user')
+    
+    setTimeout(() => {
+      window.location.href = '/'
+    }, 500)
+  }, [])
+
+  const refresh = useCallback(async () => {
+    try {
+      const userData = await apiRequest<User>('/auth/user/me')
+      setUser(userData)
+      localStorage.setItem('user', JSON.stringify(userData))
+    } catch (e) {
+      console.error('Failed to refresh user data', e)
+      const savedUser = localStorage.getItem('user')
+      if (savedUser && !user) {
+         try { setUser(JSON.parse(savedUser)) } catch {}
+      }
+    }
+    router.refresh()
+  }, [router, user])
+
+  const refreshSession = useCallback(async () => {
+      await refresh()
+  }, [refresh])
+
+  // Initial load
+  useEffect(() => {
+    const init = async () => {
+        const token = localStorage.getItem('token')
+        const savedUser = localStorage.getItem('user')
+        
+        if (token) {
+            // Optimistically set from local storage first
+            if (savedUser) {
+                try {
+                    setUser(JSON.parse(savedUser))
+                } catch (e) {
+                    localStorage.removeItem('user')
+                }
+            }
+            
+            // Then fetch fresh data
+            try {
+                const userData = await apiRequest<User>('/auth/user/me')
+                setUser(userData)
+                localStorage.setItem('user', JSON.stringify(userData))
+            } catch (e) {
+                console.error('Failed to fetch initial user data', e)
+            }
+        }
+        setLoading(false)
+    }
+    init()
+  }, [])
+
+  return (
+    <AuthContext.Provider value={{ user, loading, login, logout, refresh, refreshSession }}>
+      {isLoggingOut && <LoadingOverlay logoSrc="/ciphera_icon_no_margins.png" title="Ciphera Analytics" />}
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+export const useAuth = () => useContext(AuthContext)
--- a/lib/utils/format.ts
+++ b/lib/utils/format.ts
@@ -0,0 +1,44 @@
+/**
+ * Format numbers with commas
+ */
+export function formatNumber(num: number): string {
+  return new Intl.NumberFormat('en-US').format(num)
+}
+
+/**
+ * Format date to YYYY-MM-DD
+ */
+export function formatDate(date: Date): string {
+  return date.toISOString().split('T')[0]
+}
+
+/**
+ * Get date range for last N days
+ */
+export function getDateRange(days: number): { start: string; end: string } {
+  const end = new Date()
+  const start = new Date()
+  start.setDate(start.getDate() - days)
+  return {
+    start: formatDate(start),
+    end: formatDate(end),
+  }
+}
+
+/**
+ * Format relative time (e.g., "2 hours ago")
+ */
+export function formatRelativeTime(date: string | Date): string {
+  const d = typeof date === 'string' ? new Date(date) : date
+  const now = new Date()
+  const diff = now.getTime() - d.getTime()
+  const seconds = Math.floor(diff / 1000)
+  const minutes = Math.floor(seconds / 60)
+  const hours = Math.floor(minutes / 60)
+  const days = Math.floor(hours / 24)
+
+  if (days > 0) return `${days} day${days > 1 ? 's' : ''} ago`
+  if (hours > 0) return `${hours} hour${hours > 1 ? 's' : ''} ago`
+  if (minutes > 0) return `${minutes} minute${minutes > 1 ? 's' : ''} ago`
+  return 'Just now'
+}
--- a/next.config.ts
+++ b/next.config.ts
@@ -0,0 +1,24 @@
+import type { NextConfig } from 'next'
+
+const nextConfig: NextConfig = {
+  reactStrictMode: true,
+  // * Privacy-first: Disable analytics and telemetry
+  productionBrowserSourceMaps: false,
+  async redirects() {
+    const authUrl = process.env.NEXT_PUBLIC_AUTH_URL || 'https://auth.ciphera.net'
+    return [
+      {
+        source: '/login',
+        destination: `${authUrl}/login?client_id=analytics-app&redirect_uri=${encodeURIComponent((process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3003') + '/auth/callback')}&response_type=code`,
+        permanent: false,
+      },
+      {
+        source: '/signup',
+        destination: `${authUrl}/signup?client_id=analytics-app&redirect_uri=${encodeURIComponent((process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3003') + '/auth/callback')}&response_type=code`,
+        permanent: false,
+      },
+    ]
+  },
+}
+
+export default nextConfig
--- a/package.json
+++ b/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "analytics-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@ciphera-net/ui": "^0.0.6",
+    "@radix-ui/react-icons": "^1.3.2",
+    "axios": "^1.13.2",
+    "framer-motion": "^12.23.26",
+    "next": "^16.1.1",
+    "next-themes": "^0.4.6",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "recharts": "^2.15.0",
+    "sonner": "^2.0.7"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.19",
+    "@types/node": "^20.14.12",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^9.39.2",
+    "eslint-config-next": "^16.1.1",
+    "postcss": "^8.4.40",
+    "tailwindcss": "^3.4.7",
+    "typescript": "^5.5.4"
+  }
+}
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -0,0 +1,9 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+
+export default config
--- a/public/script.js
+++ b/public/script.js
@@ -0,0 +1,78 @@
+/**
+ * Ciphera Analytics - Privacy-First Tracking Script
+ * Lightweight, no cookies, GDPR compliant
+ */
+
+(function() {
+  'use strict';
+
+  // * Respect Do Not Track
+  if (navigator.doNotTrack === '1' || navigator.doNotTrack === 'yes' || navigator.msDoNotTrack === '1') {
+    return;
+  }
+
+  // * Get domain from script tag
+  const script = document.currentScript || document.querySelector('script[data-domain]');
+  if (!script || !script.getAttribute('data-domain')) {
+    return;
+  }
+
+  const domain = script.getAttribute('data-domain');
+  const apiUrl = script.getAttribute('data-api') || 'https://analytics.ciphera.net';
+  
+  // * Generate ephemeral session ID (not persistent)
+  function getSessionId() {
+    const key = 'plausible_session_' + domain;
+    let sessionId = sessionStorage.getItem(key);
+    if (!sessionId) {
+      sessionId = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+      sessionStorage.setItem(key, sessionId);
+    }
+    return sessionId;
+  }
+
+  // * Track pageview
+  function trackPageview() {
+    const path = window.location.pathname + window.location.search;
+    const referrer = document.referrer || '';
+    const screen = {
+      width: window.innerWidth || screen.width,
+      height: window.innerHeight || screen.height,
+    };
+
+    const payload = {
+      domain: domain,
+      path: path,
+      referrer: referrer,
+      screen: screen,
+    };
+
+    // * Send event
+    fetch(apiUrl + '/api/v1/events', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(payload),
+      keepalive: true,
+    }).catch(() => {
+      // * Silently fail - don't interrupt user experience
+    });
+  }
+
+  // * Track initial pageview
+  trackPageview();
+
+  // * Track SPA navigation (history API)
+  let lastUrl = location.href;
+  new MutationObserver(() => {
+    const url = location.href;
+    if (url !== lastUrl) {
+      lastUrl = url;
+      trackPageview();
+    }
+  }).observe(document, { subtree: true, childList: true });
+
+  // * Track popstate (browser back/forward)
+  window.addEventListener('popstate', trackPageview);
+})();
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -0,0 +1,51 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* * Brand colors - Orange used as accent only */
+    --color-brand-orange: #FD5E0F;
+    
+    /* * Neutral greys for UI */
+    --color-neutral-50: #fafafa;
+    --color-neutral-100: #f5f5f5;
+    --color-neutral-200: #e5e5e5;
+    --color-neutral-300: #d4d4d4;
+    --color-neutral-400: #a3a3a3;
+    --color-neutral-500: #737373;
+    --color-neutral-600: #525252;
+    --color-neutral-700: #404040;
+    --color-neutral-800: #262626;
+    --color-neutral-900: #171717;
+    
+    /* * Dark mode support */
+    --color-bg: #ffffff;
+    --color-text: #171717;
+  }
+  
+  .dark {
+    --color-bg: #0a0a0a;
+    --color-text: #fafafa;
+  }
+  
+  * {
+    @apply border-neutral-200 dark:border-neutral-800 transition-colors duration-300 ease-in-out;
+  }
+  
+  body {
+    @apply bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-50 transition-colors duration-300 ease-in-out;
+    font-family: var(--font-plus-jakarta-sans), system-ui, sans-serif;
+  }
+}
+
+@layer components {
+  /* * Reusable component styles */
+  .btn-primary {
+    @apply bg-brand-orange text-white px-5 py-2.5 rounded-xl font-semibold shadow-sm shadow-orange-200 dark:shadow-none hover:shadow-orange-300 dark:hover:shadow-brand-orange/20 hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 dark:focus:ring-offset-neutral-900;
+  }
+  
+  .btn-secondary {
+    @apply bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 text-neutral-900 dark:text-white px-5 py-2.5 rounded-xl font-medium hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-all duration-200 shadow-sm hover:shadow-md dark:shadow-none focus:outline-none focus:ring-2 focus:ring-neutral-200 dark:focus:ring-neutral-700 focus:ring-offset-2 dark:focus:ring-offset-neutral-900;
+  }
+}
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -0,0 +1,28 @@
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  darkMode: 'class',
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    './node_modules/@ciphera-net/ui/dist/**/*.{js,mjs}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        // * Brand color: Orange (#FD5E0F) - used as accent only
+        brand: {
+          orange: '#FD5E0F',
+        },
+      },
+      fontFamily: {
+        sans: ['var(--font-plus-jakarta-sans)', 'system-ui', 'sans-serif'],
+      },
+    },
+  },
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
+}
+export default config
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}