@stacksjs/defaults 0.70.206 → 0.70.208

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

@@ -0,0 +1,289 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Country 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">Country Analytics</h1>
+        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Detailed breakdown of visitor locations across your website</p>
+      </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">Top Countries</h3>
+          <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Visitors by country of origin</p>
+        </div>
+
+        <div class="h-96 w-full">
+          <canvas id="countryChart"></canvas>
+        </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">World Map</h3>
+          <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Geographic distribution of visitors</p>
+        </div>
+
+        <div class="flex items-center justify-center h-96 w-full bg-gray-100 dark:bg-neutral-700 rounded-lg">
+          <p class="text-gray-500 dark:text-neutral-400">World map visualization would be displayed here</p>
+        </div>
+      </div>
+
+      <div class="mb-8">
+        <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 scope="col" class="px-4 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Country</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="(country, index) 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>
+
+      <div class="mb-8">
+        <div class="mb-4">
+          <h3 class="font-medium text-gray-900 text-lg dark:text-white">Cities</h3>
+          <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Top cities by visitor count</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">City</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">Country</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="(city, index) in citiesData">
+                <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: {{ city.percentage }}%"></div>
+                    <span class="relative z-10">{{ city.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">{{ city.country }}</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">{{ city.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">{{ city.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">Languages</h3>
+          <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Browser language settings of visitors</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">Language</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">Code</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="(language, index) in languagesData">
+                <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: {{ language.percentage }}%"></div>
+                    <span class="relative z-10">{{ language.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">{{ language.code }}</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">{{ language.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">{{ language.percentage }}%</span>
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+      </div>
+</PageLayout>
+<script client>
+
+interface CountryRow {
+  name: string
+  visitors: number
+  percentage: number
+  flag: string
+  code?: string
+}
+
+interface CityRow {
+  name: string
+  country: string
+  visitors: number
+  percentage: number
+}
+
+interface LanguageRow {
+  name: string
+  code: string
+  visitors: number
+  percentage: number
+}
+
+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 countriesData = state<CountryRow[]>([
+  { name: 'United States of America', visitors: 768, flag: '🇺🇸', code: 'US', percentage: 35 },
+  { name: 'Germany', visitors: 140, flag: '🇩🇪', code: 'DE', percentage: 12 },
+  { name: 'United Kingdom', visitors: 87, flag: '🇬🇧', code: 'GB', percentage: 8 },
+  { name: 'India', visitors: 83, flag: '🇮🇳', code: 'IN', percentage: 7 },
+  { name: 'Indonesia', visitors: 80, flag: '🇮🇩', code: 'ID', percentage: 7 },
+  { name: 'Canada', visitors: 75, flag: '🇨🇦', code: 'CA', percentage: 6 },
+  { name: 'Australia', visitors: 68, flag: '🇦🇺', code: 'AU', percentage: 6 },
+  { name: 'France', visitors: 62, flag: '🇫🇷', code: 'FR', percentage: 5 },
+  { name: 'Brazil', visitors: 58, flag: '🇧🇷', code: 'BR', percentage: 5 },
+  { name: 'Japan', visitors: 52, flag: '🇯🇵', code: 'JP', percentage: 4 },
+  { name: 'Netherlands', visitors: 45, flag: '🇳🇱', code: 'NL', percentage: 4 },
+  { name: 'Spain', visitors: 42, flag: '🇪🇸', code: 'ES', percentage: 3 },
+])
+
+const citiesData = state<CityRow[]>([
+  { name: 'New York', country: 'United States of America', visitors: 120, percentage: 10 },
+  { name: 'London', country: 'United Kingdom', visitors: 87, percentage: 7 },
+  { name: 'Berlin', country: 'Germany', visitors: 75, percentage: 6 },
+  { name: 'San Francisco', country: 'United States of America', visitors: 68, percentage: 6 },
+  { name: 'Mumbai', country: 'India', visitors: 65, percentage: 5 },
+  { name: 'Toronto', country: 'Canada', visitors: 62, percentage: 5 },
+  { name: 'Jakarta', country: 'Indonesia', visitors: 60, percentage: 5 },
+  { name: 'Sydney', country: 'Australia', visitors: 58, percentage: 5 },
+  { name: 'Paris', country: 'France', visitors: 55, percentage: 4 },
+  { name: 'Los Angeles', country: 'United States of America', visitors: 52, percentage: 4 },
+])
+
+const languagesData = state<LanguageRow[]>([
+  { name: 'English', code: 'en-US', visitors: 980, percentage: 45 },
+  { name: 'German', code: 'de-DE', visitors: 140, percentage: 12 },
+  { name: 'English (UK)', code: 'en-GB', visitors: 87, percentage: 8 },
+  { name: 'Hindi', code: 'hi-IN', visitors: 83, percentage: 7 },
+  { name: 'Indonesian', code: 'id-ID', visitors: 80, percentage: 7 },
+  { name: 'French', code: 'fr-FR', visitors: 62, percentage: 5 },
+  { name: 'Portuguese', code: 'pt-BR', visitors: 58, percentage: 5 },
+  { name: 'Japanese', code: 'ja-JP', visitors: 52, percentage: 4 },
+  { name: 'Dutch', code: 'nl-NL', visitors: 45, percentage: 4 },
+  { name: 'Spanish', code: 'es-ES', visitors: 42, percentage: 3 },
+])
+
+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
+
+  const top = countriesData().slice(0, 10)
+  const total = countriesData().reduce((a, b) => a + b.visitors, 0)
+
+  chartHandle = useChart({
+    Chart: Ctor,
+    id: 'countryChart',
+    type: 'bar',
+    data: {
+      labels: top.map(item => item.name),
+      datasets: [{
+        label: 'Visitors',
+        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)', 'rgba(236, 72, 153, 0.8)', 'rgba(14, 165, 233, 0.8)', 'rgba(168, 85, 247, 0.8)', 'rgba(249, 115, 22, 0.8)', 'rgba(234, 179, 8, 0.8)'],
+        borderColor: 'rgba(255, 255, 255, 0.8)',
+        borderWidth: 1,
+      }],
+    },
+    options: {
+      indexAxis: 'y',
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          callbacks: {
+            label(context: { raw?: number }) {
+              const value = context.raw || 0
+              const percentage = Math.round((value / total) * 100)
+              return `${value} visitors (${percentage}%)`
+            },
+          },
+        },
+      },
+      scales: { x: { beginAtZero: true, grid: { display: false } }, y: { grid: { display: false } } },
+    },
+  })
+})
+
+onDestroy(() => {
+  chartHandle?.destroy()
+  chartHandle = null
+})
+</script>
+
+@endsection

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

@@ -0,0 +1,305 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Device 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">Device Analytics</h1>
+        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Detailed breakdown of device 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">Device Distribution</h3>
+            <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Percentage of visitors by device type</p>
+          </div>
+          <div class="h-80 w-full">
+            <canvas id="deviceDistributionChart"></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">Device Trends</h3>
+            <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Device usage trends over time</p>
+          </div>
+          <div class="h-80 w-full">
+            <canvas id="deviceTrendChart"></canvas>
+          </div>
+        </div>
+      </div>
+
+      <div class="mb-8">
+        <div class="mb-4">
+          <h3 class="font-medium text-gray-900 text-lg dark:text-white">Device 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">Device Type</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="(device, index) 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>
+
+      <div class="mb-8">
+        <div class="mb-4">
+          <h3 class="font-medium text-gray-900 text-lg dark:text-white">Detailed Device Data</h3>
+          <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Device usage by model 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">Device Type</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">Model</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="(device, index) in detailedDeviceData">
+                <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-900 text-sm whitespace-nowrap dark:text-white">
+                    <span class="relative z-10">{{ device.model }}</span>
+                  </td>
+                  <td class="relative px-4 py-3 text-gray-900 text-sm whitespace-nowrap dark:text-white">
+                    <span class="relative z-10">{{ device.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">{{ 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>
+
+      <div>
+        <div class="mb-4">
+          <h3 class="font-medium text-gray-900 text-lg dark:text-white">Screen Sizes</h3>
+          <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Visitor screen resolution breakdown</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">Screen Resolution</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="(screen, index) in screenSizeData">
+                <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-indigo-100/50 dark:bg-indigo-900/50" style="width: {{ screen.percentage }}%"></div>
+                    <span class="relative z-10">{{ screen.size }}</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">{{ screen.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">{{ screen.percentage }}%</span>
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+      </div>
+</PageLayout>
+<script client>
+
+interface DeviceRow {
+  name: string
+  visitors: number
+  percentage: number
+  model?: string
+  os?: string
+}
+
+interface ScreenSizeRow {
+  size: string
+  visitors: number
+  percentage: number
+}
+
+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 deviceData = state<DeviceRow[]>([
+  { name: 'Desktop', visitors: 1300, percentage: 60 },
+  { name: 'Phone', visitors: 874, percentage: 38 },
+  { name: 'Tablet', visitors: 5, percentage: 2 },
+])
+
+const detailedDeviceData = state<DeviceRow[]>([
+  { name: 'Desktop', model: 'Windows PC', os: 'Windows 11', visitors: 450, percentage: 20 },
+  { name: 'Desktop', model: 'Windows PC', os: 'Windows 10', visitors: 380, percentage: 17 },
+  { name: 'Desktop', model: 'Mac', os: 'macOS 14', visitors: 250, percentage: 11 },
+  { name: 'Desktop', model: 'Mac', os: 'macOS 13', visitors: 150, percentage: 7 },
+  { name: 'Desktop', model: 'Linux PC', os: 'Ubuntu', visitors: 70, percentage: 3 },
+  { name: 'Phone', model: 'iPhone', os: 'iOS 17', visitors: 320, percentage: 14 },
+  { name: 'Phone', model: 'iPhone', os: 'iOS 16', visitors: 180, percentage: 8 },
+  { name: 'Phone', model: 'Samsung Galaxy', os: 'Android 14', visitors: 150, percentage: 7 },
+  { name: 'Phone', model: 'Google Pixel', os: 'Android 14', visitors: 89, percentage: 4 },
+  { name: 'Phone', model: 'Xiaomi', os: 'Android 13', visitors: 135, percentage: 6 },
+  { name: 'Tablet', model: 'iPad', os: 'iPadOS 17', visitors: 3, percentage: 0.1 },
+  { name: 'Tablet', model: 'Samsung Tab', os: 'Android 14', visitors: 2, percentage: 0.1 },
+])
+
+const deviceTrendData = state<Array<{ date: string, Desktop: number, Phone: number, Tablet: number }>>([
+  { date: '2023-09', Desktop: 800, Phone: 400, Tablet: 10 },
+  { date: '2023-10', Desktop: 850, Phone: 420, Tablet: 9 },
+  { date: '2023-11', Desktop: 900, Phone: 450, Tablet: 8 },
+  { date: '2023-12', Desktop: 950, Phone: 480, Tablet: 7 },
+  { date: '2024-01', Desktop: 1000, Phone: 500, Tablet: 6 },
+  { date: '2024-02', Desktop: 1100, Phone: 600, Tablet: 5 },
+  { date: '2024-03', Desktop: 1200, Phone: 700, Tablet: 5 },
+  { date: '2024-04', Desktop: 1250, Phone: 750, Tablet: 5 },
+  { date: '2024-05', Desktop: 1300, Phone: 874, Tablet: 5 },
+])
+
+const screenSizeData = state<ScreenSizeRow[]>([
+  { size: '1920x1080', visitors: 580, percentage: 26 },
+  { size: '1366x768', visitors: 450, percentage: 20 },
+  { size: '1440x900', visitors: 320, percentage: 14 },
+  { size: '375x812', visitors: 280, percentage: 13 },
+  { size: '414x896', visitors: 220, percentage: 10 },
+  { size: '360x740', visitors: 180, percentage: 8 },
+  { size: '1536x864', visitors: 120, percentage: 5 },
+  { size: '768x1024', visitors: 80, percentage: 4 },
+])
+
+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 distribution = useChart({
+    Chart: Ctor,
+    id: 'deviceDistributionChart',
+    type: 'doughnut',
+    data: {
+      labels: deviceData().map(item => item.name),
+      datasets: [{
+        data: deviceData().map(item => item.visitors),
+        backgroundColor: ['rgba(59, 130, 246, 0.8)', 'rgba(16, 185, 129, 0.8)', 'rgba(245, 158, 11, 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: 'deviceTrendChart',
+    type: 'line',
+    data: {
+      labels: deviceTrendData().map(item => item.date),
+      datasets: [
+        { label: 'Desktop', data: deviceTrendData().map(item => item.Desktop), borderColor: 'rgba(59, 130, 246, 0.8)', backgroundColor: 'rgba(59, 130, 246, 0.1)', tension: 0.4, fill: false },
+        { label: 'Phone', data: deviceTrendData().map(item => item.Phone), borderColor: 'rgba(16, 185, 129, 0.8)', backgroundColor: 'rgba(16, 185, 129, 0.1)', tension: 0.4, fill: false },
+        { label: 'Tablet', data: deviceTrendData().map(item => item.Tablet), borderColor: 'rgba(245, 158, 11, 0.8)', backgroundColor: 'rgba(245, 158, 11, 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