@stacksjs/defaults 0.70.228 → 0.70.230

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

@@ -3,287 +3,11 @@
 @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>
+  <WebAnalyticsBreakdown
+    kind="countries"
+    title="Country Analytics"
+    description="Geographic traffic recorded by the configured analytics provider."
+    emptyMessage="Request telemetry does not geolocate IP addresses. Configure an analytics provider with geographic aggregation to populate this view."
+  />
 </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

@@ -3,303 +3,11 @@
 @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>
+  <WebAnalyticsBreakdown
+    kind="devices"
+    title="Device Analytics"
+    description="Visitor device classes derived from recorded user agents."
+    emptyMessage="No device user agents were recorded for this period."
+  />
 </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