@stacksjs/defaults 0.70.206 → 0.70.208

package/views/dashboard/analytics/blog/index.stx

@@ -0,0 +1,356 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Blog Analytics')
+<PageLayout>
+      <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between mb-6">
+        <div class="flex items-center space-x-2">
+          <div class="h-5 w-5 text-gray-500 dark:text-neutral-400 i-hugeicons-calendar-03"></div>
+          <span class="font-medium text-gray-700 text-sm dark:text-neutral-300">{{ dateRangeDisplay }}</span>
+        </div>
+        <div class="flex flex-wrap gap-2 items-center">
+          <span class="text-gray-500 text-sm dark:text-neutral-400">compared to</span>
+          <div class="relative">
+            <select x-model="comparisonType" class="block pl-3 pr-10 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600 focus:ring-inset">
+              <option value="no-comparison">No comparison</option>
+              <option value="previous-period">Previous period</option>
+              <option value="previous-year">Previous year</option>
+            </select>
+          </div>
+          <button type="button" class="inline-flex items-center px-3 py-1.5 font-semibold text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 hover:bg-gray-50 dark:hover:bg-neutral-600 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 shadow-sm">
+            <div class="mr-1 h-4 w-4 i-hugeicons-settings-01"></div>
+            Auto
+          </button>
+        </div>
+      </div>
+
+      <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 mb-8 p-4 bg-black dark:bg-neutral-900 rounded-lg">
+        <div class="flex flex-col items-center justify-center">
+          <div class="font-bold text-4xl text-white">{{ analyticsOverview.realtime }}</div>
+          <div class="text-gray-400 text-sm">Realtime</div>
+        </div>
+        <div class="flex flex-col items-center justify-center">
+          <div class="font-bold text-4xl text-white">2.2k</div>
+          <div class="text-gray-400 text-sm">People</div>
+        </div>
+        <div class="flex flex-col items-center justify-center">
+          <div class="font-bold text-4xl text-white">3k</div>
+          <div class="text-gray-400 text-sm">Views</div>
+        </div>
+        <div class="flex flex-col items-center justify-center">
+          <div class="font-bold text-4xl text-white">{{ analyticsOverview.avgTimeOnSite }}</div>
+          <div class="text-gray-400 text-sm">Avg time on site</div>
+        </div>
+        <div class="flex flex-col items-center justify-center">
+          <div class="font-bold text-4xl text-white">{{ analyticsOverview.bounceRate }}</div>
+          <div class="text-gray-400 text-sm">Bounce rate</div>
+        </div>
+        <div class="flex flex-col items-center justify-center">
+          <div class="font-bold text-4xl text-white">{{ analyticsOverview.eventCompletions }}</div>
+          <div class="text-gray-400 text-sm">Event completions</div>
+        </div>
+      </div>
+
+      <div class="mb-8 p-4 bg-white dark:bg-neutral-800 rounded-lg shadow">
+        <div class="mb-4">
+          <h3 class="font-medium leading-6 text-gray-900 text-lg dark:text-white">Traffic Overview</h3>
+          <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Daily page views and unique visitors</p>
+        </div>
+        <div class="h-80 w-full"><canvas id="blog_traffic_chart"></canvas></div>
+      </div>
+
+      <div class="grid gap-8 grid-cols-1 lg:grid-cols-2">
+        <div>
+          <div class="mb-4"><h3 class="font-medium text-gray-900 text-lg dark:text-white">Pages</h3></div>
+          <div class="overflow-hidden border border-gray-200 rounded-lg dark:border-neutral-700">
+            <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+              <thead class="bg-gray-50 dark:bg-neutral-700/50">
+                <tr>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Pages</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Entries</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Visitors</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Views</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">%</th>
+                </tr>
+              </thead>
+              <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+                <template :for="page in pagesData">
+                  <tr class="relative hover:bg-gray-50 dark:hover:bg-neutral-700/50">
+                    <td class="px-4 py-3 text-gray-900 text-sm whitespace-nowrap dark:text-white">
+                      <div class="absolute inset-0 bg-blue-100/50 dark:bg-blue-900/50" :style="'width: ' + page.percentage + '%'"></div>
+                      <span class="relative z-10">{{ page.path }}</span>
+                    </td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ page.entries }}</span></td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ page.visitors }}</span></td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ page.views }}</span></td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ page.percentage }}%</span></td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+          <div class="flex justify-end mt-2"><StxLink to="/analytics/pages" class="text-blue-600 text-sm dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">View all pages</StxLink></div>
+        </div>
+
+        <div>
+          <div class="mb-4"><h3 class="font-medium text-gray-900 text-lg dark:text-white">Referrers</h3></div>
+          <div class="overflow-hidden border border-gray-200 rounded-lg dark:border-neutral-700">
+            <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+              <thead class="bg-gray-50 dark:bg-neutral-700/50">
+                <tr>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Sources</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Visitors</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Views</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">%</th>
+                </tr>
+              </thead>
+              <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+                <template :for="referrer in referrersData">
+                  <tr class="relative hover:bg-gray-50 dark:hover:bg-neutral-700/50">
+                    <td class="px-4 py-3 text-gray-900 text-sm whitespace-nowrap dark:text-white">
+                      <div class="absolute inset-0 bg-green-100/50 dark:bg-green-900/50" :style="'width: ' + referrer.percentage + '%'"></div>
+                      <span class="relative z-10">{{ referrer.name }}</span>
+                    </td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ referrer.visitors }}</span></td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ referrer.views }}</span></td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ referrer.percentage }}%</span></td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+          <div class="flex justify-end mt-2"><StxLink to="/analytics/referrers" class="text-blue-600 text-sm dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">View all referrers</StxLink></div>
+        </div>
+      </div>
+
+      <div class="grid gap-8 grid-cols-1 lg:grid-cols-3 mt-8">
+        <div>
+          <div class="mb-4"><h3 class="font-medium text-gray-900 text-lg dark:text-white">Device Types</h3></div>
+          <div class="overflow-hidden border border-gray-200 rounded-lg dark:border-neutral-700">
+            <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+              <thead class="bg-gray-50 dark:bg-neutral-700/50">
+                <tr>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Device Types</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Visitors</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">%</th>
+                </tr>
+              </thead>
+              <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+                <template :for="device in deviceData">
+                  <tr class="relative hover:bg-gray-50 dark:hover:bg-neutral-700/50">
+                    <td class="px-4 py-3 text-gray-900 text-sm whitespace-nowrap dark:text-white">
+                      <div class="absolute inset-0 bg-purple-100/50 dark:bg-purple-900/50" :style="'width: ' + device.percentage + '%'"></div>
+                      <span class="relative z-10">{{ device.name }}</span>
+                    </td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ device.visitors }}</span></td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ device.percentage }}%</span></td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+          <div class="flex justify-end mt-2"><StxLink to="/analytics/devices" class="text-blue-600 text-sm dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">View all devices</StxLink></div>
+        </div>
+
+        <div>
+          <div class="mb-4"><h3 class="font-medium text-gray-900 text-lg dark:text-white">Browsers</h3></div>
+          <div class="overflow-hidden border border-gray-200 rounded-lg dark:border-neutral-700">
+            <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+              <thead class="bg-gray-50 dark:bg-neutral-700/50">
+                <tr>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Browsers</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Visitors</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">%</th>
+                </tr>
+              </thead>
+              <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+                <template :for="browser in browserData">
+                  <tr class="relative hover:bg-gray-50 dark:hover:bg-neutral-700/50">
+                    <td class="px-4 py-3 text-gray-900 text-sm whitespace-nowrap dark:text-white">
+                      <div class="absolute inset-0 bg-amber-100/50 dark:bg-amber-900/50" :style="'width: ' + browser.percentage + '%'"></div>
+                      <span class="relative z-10">{{ browser.name }}</span>
+                    </td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ browser.visitors }}</span></td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ browser.percentage }}%</span></td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+          <div class="flex justify-end mt-2"><StxLink to="/analytics/browsers" class="text-blue-600 text-sm dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">View all browsers</StxLink></div>
+        </div>
+
+        <div>
+          <div class="mb-4"><h3 class="font-medium text-gray-900 text-lg dark:text-white">Countries</h3></div>
+          <div class="overflow-hidden border border-gray-200 rounded-lg dark:border-neutral-700">
+            <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+              <thead class="bg-gray-50 dark:bg-neutral-700/50">
+                <tr>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Countries</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Visitors</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">%</th>
+                </tr>
+              </thead>
+              <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+                <template :for="country in countriesData">
+                  <tr class="relative hover:bg-gray-50 dark:hover:bg-neutral-700/50">
+                    <td class="px-4 py-3 text-gray-900 text-sm whitespace-nowrap dark:text-white">
+                      <div class="absolute inset-0 bg-rose-100/50 dark:bg-rose-900/50" :style="'width: ' + country.percentage + '%'"></div>
+                      <span class="relative z-10"><span class="mr-2">{{ country.flag }}</span>{{ country.name }}</span>
+                    </td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ country.visitors }}</span></td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ country.percentage }}%</span></td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+          <div class="flex justify-end mt-2"><StxLink to="/analytics/countries" class="text-blue-600 text-sm dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">View all countries</StxLink></div>
+        </div>
+      </div>
+</PageLayout>
+<script client>
+
+interface ChartLike { destroy: () => void }
+type ChartCtor = new (canvas: HTMLElement, config: { type: string, data: unknown, options?: unknown }) => ChartLike
+
+// Static analytics tables + overview — moved out of the former
+// `<script server>` block (stacksjs/stacks#1838).
+const pagesRaw = [
+  { path: '/', entries: 1800, visitors: 1800, views: 2100 },
+  { path: '/blog', entries: 113, visitors: 113, views: 139 },
+  { path: '/about', entries: 51, visitors: 51, views: 77 },
+  { path: '/contact', entries: 42, visitors: 42, views: 51 },
+  { path: '/products', entries: 37, visitors: 37, views: 60 },
+  { path: '/guide/get-started.html', entries: 21, visitors: 29, views: 45 },
+  { path: '/docs', entries: 16, visitors: 17, views: 202 },
+  { path: '/guide/intro.html', entries: 12, visitors: 17, views: 22 },
+  { path: '/guide/get-started', entries: 9, visitors: 12, views: 13 },
+  { path: '/team', entries: 9, visitors: 10, views: 15 },
+]
+
+const referrersRaw = [
+  { name: 'Direct / Unknown', visitors: 1400, views: 2100 },
+  { name: 'X/Twitter', visitors: 545, views: 580 },
+  { name: 'Google', visitors: 46, views: 50 },
+  { name: 'stacksjs.com', visitors: 45, views: 63 },
+  { name: 'stacksjs.netlify.app', visitors: 38, views: 60 },
+  { name: 'github.com', visitors: 34, views: 47 },
+  { name: 'DuckDuckGo', visitors: 32, views: 35 },
+  { name: 'Bing', visitors: 22, views: 24 },
+  { name: 'Baidu', visitors: 8, views: 8 },
+  { name: 'npmjs.com', visitors: 7, views: 7 },
+]
+
+const deviceData = [
+  { name: 'Desktop', visitors: 1300, percentage: 60 },
+  { name: 'Phone', visitors: 874, percentage: 38 },
+  { name: 'Tablet', visitors: 5, percentage: 2 },
+]
+
+const browserData = [
+  { name: 'Chrome', visitors: 1300, percentage: 58 },
+  { name: 'Safari', visitors: 579, percentage: 26 },
+  { name: 'Edge', visitors: 129, percentage: 6 },
+  { name: 'Firefox', visitors: 92, percentage: 4 },
+  { name: 'Mozilla', visitors: 24, percentage: 1 },
+]
+
+const countriesRaw = [
+  { name: 'United States of America', visitors: 768, flag: '🇺🇸' },
+  { name: 'Germany', visitors: 140, flag: '🇩🇪' },
+  { name: 'United Kingdom', visitors: 87, flag: '🇬🇧' },
+  { name: 'India', visitors: 83, flag: '🇮🇳' },
+  { name: 'Indonesia', visitors: 80, flag: '🇮🇩' },
+]
+
+const totalPageViews = pagesRaw.reduce((s, p) => s + p.views, 0)
+const totalReferrerViews = referrersRaw.reduce((s, r) => s + r.views, 0)
+const totalCountryVisitors = countriesRaw.reduce((s, c) => s + c.visitors, 0)
+
+const pagesData = pagesRaw.map(p => ({ ...p, percentage: Math.round((p.views / totalPageViews) * 100) }))
+const referrersData = referrersRaw.map(r => ({ ...r, percentage: Math.round((r.views / totalReferrerViews) * 100) }))
+const countriesData = countriesRaw.map(c => ({ ...c, percentage: Math.round((c.visitors / totalCountryVisitors) * 100) }))
+
+const analyticsOverview = {
+  realtime: 0,
+  people: 2200,
+  views: 3000,
+  avgTimeOnSite: '03:36',
+  bounceRate: '89%',
+  eventCompletions: 0,
+}
+
+const dateRangeDisplay = state('All Time: Sep 7, 2023 to Mar 6, 2025')
+const comparisonType = state('no-comparison')
+
+const trafficData = state<Array<{ date: string, pageViews: number, visitors: number }>>([
+  { date: '2023-11-01', pageViews: 100, visitors: 80 },
+  { date: '2023-11-15', pageViews: 250, visitors: 180 },
+  { date: '2023-12-01', pageViews: 150, visitors: 120 },
+  { date: '2023-12-15', pageViews: 220, visitors: 170 },
+  { date: '2024-01-01', pageViews: 180, visitors: 140 },
+  { date: '2024-01-15', pageViews: 320, visitors: 240 },
+  { date: '2024-02-01', pageViews: 280, visitors: 210 },
+  { date: '2024-02-15', pageViews: 400, visitors: 300 },
+  { date: '2024-03-01', pageViews: 350, visitors: 270 },
+  { date: '2024-03-15', pageViews: 300, visitors: 230 },
+  { date: '2024-04-01', pageViews: 250, visitors: 190 },
+  { date: '2024-04-15', pageViews: 200, visitors: 150 },
+  { date: '2024-05-01', pageViews: 150, visitors: 120 },
+  { date: '2024-05-15', pageViews: 120, visitors: 90 },
+  { date: '2024-06-01', pageViews: 100, visitors: 80 },
+  { date: '2024-06-15', pageViews: 130, visitors: 100 },
+  { date: '2024-07-01', pageViews: 150, visitors: 120 },
+  { date: '2024-07-15', pageViews: 120, visitors: 90 },
+  { date: '2024-08-01', pageViews: 100, visitors: 80 },
+  { date: '2024-08-15', pageViews: 80, visitors: 60 },
+  { date: '2024-09-01', pageViews: 100, visitors: 80 },
+  { date: '2024-09-15', pageViews: 120, visitors: 90 },
+  { date: '2024-10-01', pageViews: 150, visitors: 120 },
+  { date: '2024-10-15', pageViews: 100, visitors: 80 },
+  { date: '2024-11-01', pageViews: 80, visitors: 60 },
+  { date: '2024-11-15', pageViews: 120, visitors: 90 },
+  { date: '2024-12-01', pageViews: 300, visitors: 230 },
+  { date: '2024-12-15', pageViews: 150, visitors: 120 },
+  { date: '2025-01-01', pageViews: 100, visitors: 80 },
+  { date: '2025-01-15', pageViews: 80, visitors: 60 },
+  { date: '2025-02-01', pageViews: 60, visitors: 40 },
+])
+
+let chartHandle: { destroy: () => void } | null = null
+
+onMount(async () => {
+  const { Chart, registerables } = await import('@stacksjs/charts')
+  Chart.register(...registerables)
+  const Ctor = Chart as unknown as ChartCtor
+  chartHandle = useChart({
+    Chart: Ctor,
+    id: 'blog_traffic_chart',
+    type: 'line',
+    data: {
+      labels: trafficData().map(item => item.date),
+      datasets: [
+        { label: 'Page Views', data: trafficData().map(item => item.pageViews), backgroundColor: 'rgba(147, 197, 253, 0.3)', borderColor: 'rgba(59, 130, 246, 0.8)', borderWidth: 2, tension: 0.4, fill: true },
+        { label: 'Visitors', data: trafficData().map(item => item.visitors), backgroundColor: 'rgba(147, 197, 253, 0.1)', borderColor: 'rgba(96, 165, 250, 0.8)', borderWidth: 2, tension: 0.4, fill: false },
+      ],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        x: { grid: { display: false }, ticks: { maxTicksLimit: 4 } },
+        y: { beginAtZero: true, grid: { borderDash: [2, 4], color: 'rgba(160, 174, 192, 0.2)' }, ticks: { maxTicksLimit: 6 } },
+      },
+      plugins: { legend: { display: true, position: 'top' }, tooltip: { mode: 'index', intersect: false } },
+    },
+  })
+})
+
+onDestroy(() => {
+  chartHandle?.destroy()
+  chartHandle = null
+})
+</script>
+
+@endsection

package/views/dashboard/analytics/browsers/index.stx

@@ -0,0 +1,263 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Browser Analytics')
+<PageLayout>
+      <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between mb-6">
+        <div class="flex items-center space-x-2">
+          <div class="h-5 w-5 text-gray-500 dark:text-neutral-400 i-hugeicons-calendar-03"></div>
+          <span class="font-medium text-gray-700 text-sm dark:text-neutral-300">{{ dateRangeDisplay }}</span>
+        </div>
+
+        <div class="flex flex-wrap gap-2 items-center">
+          <span class="text-gray-500 text-sm dark:text-neutral-400">compared to</span>
+          <div class="relative">
+            <select x-model="comparisonType" class="block pl-3 pr-10 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600 focus:ring-inset">
+              <option value="no-comparison">No comparison</option>
+              <option value="previous-period">Previous period</option>
+              <option value="previous-year">Previous year</option>
+            </select>
+          </div>
+          <button type="button" class="inline-flex items-center px-3 py-1.5 font-semibold text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 hover:bg-gray-50 dark:hover:bg-neutral-600 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 shadow-sm">
+            <div class="mr-1 h-4 w-4 i-hugeicons-settings-01"></div>
+            Auto
+          </button>
+        </div>
+      </div>
+
+      <div class="mb-8">
+        <h1 class="font-bold text-2xl text-gray-900 dark:text-white">Browser Analytics</h1>
+        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Detailed breakdown of browser usage across your website</p>
+      </div>
+
+      <div class="grid gap-8 grid-cols-1 lg:grid-cols-2 mb-8">
+        <div class="p-4 bg-white dark:bg-neutral-800 rounded-lg shadow">
+          <div class="mb-4">
+            <h3 class="font-medium leading-6 text-gray-900 text-lg dark:text-white">Browser Distribution</h3>
+            <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Percentage of visitors by browser</p>
+          </div>
+          <div class="h-80 w-full">
+            <canvas id="browserDistributionChart"></canvas>
+          </div>
+        </div>
+
+        <div class="p-4 bg-white dark:bg-neutral-800 rounded-lg shadow">
+          <div class="mb-4">
+            <h3 class="font-medium leading-6 text-gray-900 text-lg dark:text-white">Browser Trends</h3>
+            <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Browser usage trends over time</p>
+          </div>
+          <div class="h-80 w-full">
+            <canvas id="browserTrendChart"></canvas>
+          </div>
+        </div>
+      </div>
+
+      <div class="mb-8">
+        <div class="mb-4">
+          <h3 class="font-medium text-gray-900 text-lg dark:text-white">Browser Overview</h3>
+        </div>
+
+        <div class="overflow-hidden border border-gray-200 rounded-lg dark:border-neutral-700">
+          <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+            <thead class="bg-gray-50 dark:bg-neutral-700/50">
+              <tr>
+                <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Browser</th>
+                <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Visitors</th>
+                <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">%</th>
+              </tr>
+            </thead>
+            <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+              <template :for="(browser, index) in browserData">
+                <tr class="relative hover:bg-gray-50 dark:hover:bg-neutral-700/50">
+                  <td class="px-4 py-3 text-gray-900 text-sm whitespace-nowrap dark:text-white">
+                    <div class="absolute inset-0 bg-amber-100/50 dark:bg-amber-900/50" style="width: {{ browser.percentage }}%"></div>
+                    <span class="relative z-10">{{ browser.name }}</span>
+                  </td>
+                  <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">
+                    <span class="relative z-10">{{ browser.visitors }}</span>
+                  </td>
+                  <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">
+                    <span class="relative z-10">{{ browser.percentage }}%</span>
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div>
+        <div class="mb-4">
+          <h3 class="font-medium text-gray-900 text-lg dark:text-white">Detailed Browser Data</h3>
+          <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Browser usage by version and operating system</p>
+        </div>
+
+        <div class="overflow-hidden border border-gray-200 rounded-lg dark:border-neutral-700">
+          <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+            <thead class="bg-gray-50 dark:bg-neutral-700/50">
+              <tr>
+                <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Browser</th>
+                <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Version</th>
+                <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">OS</th>
+                <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Visitors</th>
+                <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">%</th>
+              </tr>
+            </thead>
+            <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+              <template :for="(browser, index) in detailedBrowserData">
+                <tr class="relative hover:bg-gray-50 dark:hover:bg-neutral-700/50">
+                  <td class="px-4 py-3 text-gray-900 text-sm whitespace-nowrap dark:text-white">
+                    <div class="absolute inset-0 bg-amber-100/50 dark:bg-amber-900/50" style="width: {{ browser.percentage }}%"></div>
+                    <span class="relative z-10">{{ browser.name }}</span>
+                  </td>
+                  <td class="relative px-4 py-3 text-gray-900 text-sm whitespace-nowrap dark:text-white">
+                    <span class="relative z-10">{{ browser.version }}</span>
+                  </td>
+                  <td class="relative px-4 py-3 text-gray-900 text-sm whitespace-nowrap dark:text-white">
+                    <span class="relative z-10">{{ browser.os }}</span>
+                  </td>
+                  <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">
+                    <span class="relative z-10">{{ browser.visitors }}</span>
+                  </td>
+                  <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">
+                    <span class="relative z-10">{{ browser.percentage }}%</span>
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+      </div>
+</PageLayout>
+<script client>
+
+interface BrowserRow {
+  name: string
+  visitors: number
+  percentage: number
+  version?: string
+  os?: string
+}
+
+interface ChartLike { destroy: () => void }
+type ChartCtor = new (canvas: HTMLElement, config: { type: string, data: unknown, options?: unknown }) => ChartLike
+
+const dateRangeDisplay = state('All Time: Sep 7, 2023 to Mar 6, 2025')
+const comparisonType = state('no-comparison')
+
+const browserData = state<BrowserRow[]>([
+  { name: 'Chrome', visitors: 1300, percentage: 58 },
+  { name: 'Safari', visitors: 579, percentage: 26 },
+  { name: 'Edge', visitors: 129, percentage: 6 },
+  { name: 'Firefox', visitors: 92, percentage: 4 },
+  { name: 'Mozilla', visitors: 24, percentage: 1 },
+  { name: 'Opera', visitors: 18, percentage: 0.8 },
+  { name: 'Samsung Internet', visitors: 15, percentage: 0.7 },
+  { name: 'UC Browser', visitors: 12, percentage: 0.5 },
+  { name: 'Internet Explorer', visitors: 8, percentage: 0.4 },
+  { name: 'Brave', visitors: 7, percentage: 0.3 },
+])
+
+const detailedBrowserData = state<BrowserRow[]>([
+  { name: 'Chrome', version: '120.0.6099', os: 'Windows', visitors: 450, percentage: 20 },
+  { name: 'Chrome', version: '120.0.6099', os: 'macOS', visitors: 380, percentage: 17 },
+  { name: 'Chrome', version: '120.0.6099', os: 'Linux', visitors: 220, percentage: 10 },
+  { name: 'Chrome', version: '119.0.6045', os: 'Windows', visitors: 150, percentage: 7 },
+  { name: 'Chrome', version: '119.0.6045', os: 'macOS', visitors: 100, percentage: 4 },
+  { name: 'Safari', version: '17.2', os: 'macOS', visitors: 320, percentage: 14 },
+  { name: 'Safari', version: '17.1', os: 'macOS', visitors: 180, percentage: 8 },
+  { name: 'Safari', version: '16.5', os: 'iOS', visitors: 79, percentage: 4 },
+  { name: 'Edge', version: '120.0.2210', os: 'Windows', visitors: 89, percentage: 4 },
+  { name: 'Edge', version: '120.0.2210', os: 'macOS', visitors: 40, percentage: 2 },
+  { name: 'Firefox', version: '121.0', os: 'Windows', visitors: 52, percentage: 2 },
+  { name: 'Firefox', version: '121.0', os: 'macOS', visitors: 40, percentage: 2 },
+])
+
+const browserTrendData = state<Array<{ date: string, Chrome: number, Safari: number, Edge: number, Firefox: number, Other: number }>>([
+  { date: '2023-09', Chrome: 800, Safari: 400, Edge: 80, Firefox: 60, Other: 30 },
+  { date: '2023-10', Chrome: 850, Safari: 420, Edge: 85, Firefox: 65, Other: 32 },
+  { date: '2023-11', Chrome: 900, Safari: 450, Edge: 90, Firefox: 70, Other: 35 },
+  { date: '2023-12', Chrome: 950, Safari: 480, Edge: 95, Firefox: 75, Other: 38 },
+  { date: '2024-01', Chrome: 1000, Safari: 500, Edge: 100, Firefox: 80, Other: 40 },
+  { date: '2024-02', Chrome: 1100, Safari: 520, Edge: 110, Firefox: 85, Other: 42 },
+  { date: '2024-03', Chrome: 1200, Safari: 550, Edge: 120, Firefox: 90, Other: 45 },
+  { date: '2024-04', Chrome: 1250, Safari: 560, Edge: 125, Firefox: 92, Other: 47 },
+  { date: '2024-05', Chrome: 1300, Safari: 579, Edge: 129, Firefox: 92, Other: 50 },
+])
+
+let chartHandles: Array<{ destroy: () => void }> = []
+
+onMount(async () => {
+  const { Chart, registerables } = await import('@stacksjs/charts')
+  Chart.register(...registerables)
+  const Ctor = Chart as unknown as ChartCtor
+
+  const top = browserData().slice(0, 5)
+  const distribution = useChart({
+    Chart: Ctor,
+    id: 'browserDistributionChart',
+    type: 'pie',
+    data: {
+      labels: top.map(item => item.name),
+      datasets: [{
+        data: top.map(item => item.visitors),
+        backgroundColor: ['rgba(59, 130, 246, 0.8)', 'rgba(16, 185, 129, 0.8)', 'rgba(245, 158, 11, 0.8)', 'rgba(239, 68, 68, 0.8)', 'rgba(139, 92, 246, 0.8)'],
+        borderColor: 'rgba(255, 255, 255, 0.8)',
+        borderWidth: 1,
+      }],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: { position: 'right', labels: { padding: 20, font: { size: 12 } } },
+        tooltip: {
+          callbacks: {
+            label(context: { label?: string, raw?: number, dataset: { data: number[] } }) {
+              const label = context.label || ''
+              const value = context.raw || 0
+              const total = context.dataset.data.reduce((a: number, b: number) => a + b, 0)
+              const percentage = Math.round((value / total) * 100)
+              return `${label}: ${value} visitors (${percentage}%)`
+            },
+          },
+        },
+      },
+    },
+  })
+
+  const trend = useChart({
+    Chart: Ctor,
+    id: 'browserTrendChart',
+    type: 'line',
+    data: {
+      labels: browserTrendData().map(item => item.date),
+      datasets: [
+        { label: 'Chrome', data: browserTrendData().map(item => item.Chrome), borderColor: 'rgba(59, 130, 246, 0.8)', backgroundColor: 'rgba(59, 130, 246, 0.1)', tension: 0.4, fill: false },
+        { label: 'Safari', data: browserTrendData().map(item => item.Safari), borderColor: 'rgba(16, 185, 129, 0.8)', backgroundColor: 'rgba(16, 185, 129, 0.1)', tension: 0.4, fill: false },
+        { label: 'Edge', data: browserTrendData().map(item => item.Edge), borderColor: 'rgba(245, 158, 11, 0.8)', backgroundColor: 'rgba(245, 158, 11, 0.1)', tension: 0.4, fill: false },
+        { label: 'Firefox', data: browserTrendData().map(item => item.Firefox), borderColor: 'rgba(239, 68, 68, 0.8)', backgroundColor: 'rgba(239, 68, 68, 0.1)', tension: 0.4, fill: false },
+        { label: 'Other', data: browserTrendData().map(item => item.Other), borderColor: 'rgba(139, 92, 246, 0.8)', backgroundColor: 'rgba(139, 92, 246, 0.1)', tension: 0.4, fill: false },
+      ],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        x: { grid: { display: false } },
+        y: { beginAtZero: true, grid: { borderDash: [2, 4], color: 'rgba(160, 174, 192, 0.2)' }, ticks: { maxTicksLimit: 6 } },
+      },
+      plugins: { legend: { position: 'top' }, tooltip: { mode: 'index', intersect: false } },
+    },
+  })
+
+  chartHandles = [distribution.instance, trend.instance].filter((c): c is ChartLike => c !== null)
+})
+
+onDestroy(() => {
+  chartHandles.forEach(c => c.destroy())
+  chartHandles = []
+})
+</script>
+
+@endsection