Initial commit: Analytics frontend implementation

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