Initial commit: Analytics frontend implementation

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>
+  )
+}

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>
+  )
+}

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>
+  )
+}

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>
+  )
+}

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>
+  )
+}

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>
+  )
+}

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>
+  )
+}

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>
+  )
+}