@stacksjs/ts-analytics 0.1.6

package/src/dashboard/components/LiveActivityFeed.stx

@@ -0,0 +1,172 @@
+<script server>
+/**
+ * LiveActivityFeed Component
+ *
+ * Real-time feed of visitor activity.
+ */
+import { defineProps, withDefaults } from 'stx'
+
+export type ActivityType = 'pageview' | 'event' | 'conversion' | 'session_start' | 'session_end'
+
+export interface Activity {
+  id: string
+  type: ActivityType
+  page?: string
+  eventName?: string
+  country?: string
+  countryCode?: string
+  device?: 'desktop' | 'mobile' | 'tablet'
+  timestamp: Date
+  value?: number
+}
+
+interface LiveActivityFeedProps {
+  activities: Activity[]
+  maxItems?: number
+  autoScroll?: boolean
+  showTimestamps?: boolean
+  paused?: boolean
+}
+
+const { activities, maxItems, autoScroll, showTimestamps, paused } = withDefaults(
+  defineProps<LiveActivityFeedProps>(),
+  {
+    maxItems: 20,
+    autoScroll: true,
+    showTimestamps: true,
+    paused: false,
+  }
+)
+
+const displayedActivities = activities.slice(0, maxItems)
+
+const activityConfig: Record<ActivityType, { icon: string, color: string, label: string }> = {
+  pageview: {
+    icon: 'M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z',
+    color: 'bg-blue-100 text-blue-600',
+    label: 'Page View',
+  },
+  event: {
+    icon: 'M13 10V3L4 14h7v7l9-11h-7z',
+    color: 'bg-purple-100 text-purple-600',
+    label: 'Event',
+  },
+  conversion: {
+    icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
+    color: 'bg-green-100 text-green-600',
+    label: 'Conversion',
+  },
+  session_start: {
+    icon: 'M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1',
+    color: 'bg-cyan-100 text-cyan-600',
+    label: 'Session Start',
+  },
+  session_end: {
+    icon: 'M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1',
+    color: 'bg-gray-100 text-gray-600',
+    label: 'Session End',
+  },
+}
+
+const deviceIcons: Record<string, string> = {
+  desktop: 'M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z',
+  mobile: 'M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z',
+  tablet: 'M12 18h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z',
+}
+
+function getFlag(countryCode?: string): string {
+  if (!countryCode || countryCode.length !== 2)
+    return '🌍'
+  const codePoints = countryCode.toUpperCase().split('').map(char => 127397 + char.charCodeAt(0))
+  return String.fromCodePoint(...codePoints)
+}
+
+function getActivityText(activity: Activity): string {
+  switch (activity.type) {
+    case 'pageview':
+      return activity.page || 'Unknown page'
+    case 'event':
+      return activity.eventName || 'Custom event'
+    case 'conversion':
+      return activity.eventName || 'Goal completed'
+    case 'session_start':
+      return 'Started browsing'
+    case 'session_end':
+      return 'Left the site'
+    default:
+      return 'Activity'
+  }
+}
+</script>
+
+<div class="live-activity-feed card-hover p-6">
+  <div class="flex items-center justify-between mb-4">
+    <div class="flex items-center gap-2">
+      <h3 class="text-sm font-medium text-gray-900">Live Activity</h3>
+      @if (!paused)
+        <div class="relative">
+          <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
+          <div class="absolute inset-0 w-2 h-2 rounded-full bg-green-500 animate-ping"></div>
+        </div>
+      @else
+        <span class="text-xs text-gray-500">(Paused)</span>
+      @endif
+    </div>
+    @if (activities.length)
+      <span class="text-xs text-gray-500">
+        {{ activities.length }} activities
+      </span>
+    @endif
+  </div>
+
+  @if (!activities.length)
+    <div class="text-center py-8 text-gray-500">
+      <Icon name="zap" size="48" class="mx-auto text-gray-300 mb-3" />
+      <p>Waiting for activity...</p>
+    </div>
+  @else
+    <div class="space-y-2 max-h-96 overflow-y-auto">
+      @foreach (displayedActivities as activity)
+        <div class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 cursor-pointer transition-colors">
+          <div class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 {{ activityConfig[activity.type].color }}">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ activityConfig[activity.type].icon }}" />
+            </svg>
+          </div>
+
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center gap-2">
+              <span class="text-sm text-gray-900 truncate">
+                {{ getActivityText(activity) }}
+              </span>
+              @if (activity.value)
+                <span class="text-xs font-medium text-green-600">
+                  +${{ activity.value }}
+                </span>
+              @endif
+            </div>
+            <div class="flex items-center gap-2 text-xs text-gray-500">
+              @if (activity.countryCode)
+                <span class="flex items-center gap-1">
+                  {{ getFlag(activity.countryCode) }}
+                  {{ activity.country }}
+                </span>
+              @endif
+              @if (activity.device)
+                <span class="flex items-center gap-1">
+                  <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ deviceIcons[activity.device] }}" />
+                  </svg>
+                </span>
+              @endif
+            </div>
+          </div>
+
+          @if (showTimestamps)
+            <span class="text-xs text-gray-400 flex-shrink-0">Just now</span>
+          @endif
+        </div>
+      @endforeach
+    </div>
+  @endif
+</div>

package/src/dashboard/components/MetricComparison.stx

@@ -0,0 +1,106 @@
+<script server>
+/**
+ * MetricComparison Component
+ *
+ * Displays a metric with visual comparison between current and previous periods.
+ */
+import { defineProps, withDefaults } from 'stx'
+import { formatChange, formatCompact, formatCurrency, formatDuration, formatPercentage } from '../utils'
+
+interface MetricComparisonProps {
+  title: string
+  current: number
+  previous: number
+  format?: 'number' | 'percentage' | 'duration' | 'currency'
+  loading?: boolean
+  invertColors?: boolean
+}
+
+const { title, current, previous, format, loading, invertColors } = withDefaults(
+  defineProps<MetricComparisonProps>(),
+  {
+    format: 'number',
+    loading: false,
+    invertColors: false,
+  }
+)
+
+const change = previous === 0
+  ? (current > 0 ? 100 : 0)
+  : ((current - previous) / previous) * 100
+
+function formatValue(value: number): string {
+  switch (format) {
+    case 'percentage':
+      return formatPercentage(value)
+    case 'duration':
+      return formatDuration(value)
+    case 'currency':
+      return formatCurrency(value)
+    default:
+      return formatCompact(value)
+  }
+}
+
+const formattedCurrent = formatValue(current)
+const formattedPrevious = formatValue(previous)
+
+const positive = change >= 0
+const isPositive = invertColors ? !positive : positive
+
+const max = Math.max(current, previous)
+const barWidthCurrent = max > 0 ? (current / max) * 100 : 0
+const barWidthPrevious = max > 0 ? (previous / max) * 100 : 0
+</script>
+
+<div class="metric-comparison card-hover p-6">
+  <div class="flex items-center justify-between mb-4">
+    <h3 class="text-sm font-medium text-gray-900">{{ title }}</h3>
+    @if (!loading)
+      <span class="text-sm font-medium {{ isPositive ? 'text-green-600' : 'text-red-600' }}">
+        {{ formatChange(change / 100) }}
+      </span>
+    @endif
+  </div>
+
+  @if (loading)
+    <div class="space-y-4 animate-pulse">
+      <div>
+        <div class="skeleton h-4 w-20 mb-2"></div>
+        <div class="skeleton h-3 w-full"></div>
+      </div>
+      <div>
+        <div class="skeleton h-4 w-20 mb-2"></div>
+        <div class="skeleton h-3 w-3/4"></div>
+      </div>
+    </div>
+  @else
+    <div class="space-y-4">
+      <div>
+        <div class="flex items-center justify-between text-sm mb-1">
+          <span class="text-gray-600">Current period</span>
+          <span class="font-semibold text-gray-900">{{ formattedCurrent }}</span>
+        </div>
+        <div class="h-3 bg-gray-100 rounded-full overflow-hidden">
+          <div
+            class="h-full rounded-full transition-all duration-500 {{ isPositive ? 'bg-green-500' : 'bg-red-500' }}"
+            style="width: {{ barWidthCurrent }}%"
+          ></div>
+        </div>
+      </div>
+
+      <div>
+        <div class="flex items-center justify-between text-sm mb-1">
+          <span class="text-gray-600">Previous period</span>
+          <span class="font-medium text-gray-500">{{ formattedPrevious }}</span>
+        </div>
+        <div class="h-3 bg-gray-100 rounded-full overflow-hidden">
+          <div
+            class="h-full bg-gray-400 rounded-full transition-all duration-500"
+            style="width: {{ barWidthPrevious }}%"
+          ></div>
+        </div>
+      </div>
+    </div>
+  @endif
+</div>

package/src/dashboard/components/MiniStats.stx

@@ -0,0 +1,96 @@
+<script server>
+/**
+ * MiniStats Component
+ *
+ * Compact horizontal row of mini stats, perfect for headers or summaries.
+ */
+import { defineProps, withDefaults } from 'stx'
+import { formatCompact, formatCurrency, formatDuration, formatPercentage } from '../utils'
+
+export interface MiniStat {
+  label: string
+  value: number | string
+  format?: 'number' | 'percentage' | 'duration' | 'currency'
+  change?: number
+  icon?: string
+}
+
+interface MiniStatsProps {
+  stats: MiniStat[]
+  loading?: boolean
+  dividers?: boolean
+}
+
+const { stats, loading, dividers } = withDefaults(
+  defineProps<MiniStatsProps>(),
+  {
+    loading: false,
+    dividers: true,
+  }
+)
+
+function formatValue(stat: MiniStat): string {
+  if (typeof stat.value === 'string')
+    return stat.value
+
+  switch (stat.format) {
+    case 'percentage':
+      return formatPercentage(stat.value)
+    case 'duration':
+      return formatDuration(stat.value)
+    case 'currency':
+      return formatCurrency(stat.value)
+    default:
+      return formatCompact(stat.value)
+  }
+}
+</script>
+
+<div class="mini-stats flex items-center flex-wrap gap-y-2 py-2">
+  @if (loading)
+    @foreach ([1, 2, 3, 4] as i)
+      <div class="flex items-center gap-6 animate-pulse">
+        <div class="flex items-center gap-2">
+          <div class="skeleton h-4 w-16"></div>
+          <div class="skeleton h-5 w-12"></div>
+        </div>
+        @if (dividers && i < 4)
+          <div class="h-4 w-px bg-gray-200"></div>
+        @endif
+      </div>
+    @endforeach
+  @else
+    @foreach (stats as stat)
+      <div class="flex items-center">
+        <div class="flex items-center gap-2 px-3 first:pl-0 last:pr-0">
+          @if (stat.icon)
+            <svg
+              class="w-4 h-4 text-gray-400"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ stat.icon }}" />
+            </svg>
+          @endif
+
+          <span class="text-sm text-gray-500">{{ stat.label }}</span>
+
+          <span class="text-sm font-semibold text-gray-900">
+            {{ formatValue(stat) }}
+          </span>
+
+          @if (stat.change !== undefined)
+            <span class="text-xs font-medium {{ stat.change >= 0 ? 'text-green-600' : 'text-red-600' }}">
+              {{ stat.change >= 0 ? '+' : '' }}{{ stat.change.toFixed(1) }}%
+            </span>
+          @endif
+        </div>
+
+        @if (dividers && !loop.last)
+          <div class="h-4 w-px bg-gray-200"></div>
+        @endif
+      </div>
+    @endforeach
+  @endif
+</div>

package/src/dashboard/components/OSBreakdown.stx

@@ -0,0 +1,124 @@
+<script server>
+/**
+ * OSBreakdown Component
+ *
+ * Displays operating system breakdown with icons.
+ */
+import { defineProps, withDefaults } from 'stx'
+import type { TopItem } from '../types'
+import { formatPercentage } from '../utils'
+
+interface OSBreakdownProps {
+  systems: TopItem[]
+  loading?: boolean
+}
+
+const { systems, loading } = withDefaults(
+  defineProps<OSBreakdownProps>(),
+  {
+    loading: false,
+  }
+)
+
+const osIcons: Record<string, string> = {
+  windows: `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801"/></svg>`,
+  macos: `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>`,
+  ios: `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>`,
+  android: `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M17.523 15.341c-.5 0-.91-.41-.91-.91s.41-.91.91-.91.91.41.91.91-.41.91-.91.91m-11.046 0c-.5 0-.91-.41-.91-.91s.41-.91.91-.91.91.41.91.91-.41.91-.91.91m11.4-6.02l1.97-3.41c.11-.19.04-.43-.15-.54-.19-.11-.43-.04-.54.15l-2 3.46C15.53 8.31 13.84 7.91 12 7.91s-3.53.4-5.15 1.07l-2-3.46c-.11-.19-.35-.26-.54-.15-.19.11-.26.35-.15.54l1.97 3.41C3.47 11.07 1.59 14.07 1.5 17.5h21c-.09-3.43-1.97-6.43-4.63-8.18z"/></svg>`,
+  linux: `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M12.504 0c-.155 0-.311.001-.465.003-.653.014-1.302.082-1.933.225-1.308.298-2.482.88-3.46 1.71-.476.4-.903.85-1.273 1.347-.383.515-.706 1.076-.958 1.672-.264.628-.456 1.29-.57 1.97-.118.704-.162 1.425-.132 2.143.032.757.136 1.505.31 2.234.159.662.378 1.304.649 1.92.238.54.522 1.058.846 1.546.261.392.549.764.86 1.114.296.333.615.646.95.938.317.276.65.533.995.77.284.197.578.38.879.548.21.118.426.227.644.33.197.093.398.18.6.262.19.078.384.15.58.217.189.065.38.125.573.18.194.057.39.108.587.155.198.048.398.09.6.127.21.04.422.072.635.1.225.03.452.052.679.068.24.018.481.028.723.028.242 0 .483-.01.723-.028.227-.016.454-.038.679-.068.213-.028.425-.06.635-.1.202-.037.402-.079.6-.127.197-.047.393-.098.587-.155.193-.055.384-.115.573-.18.196-.067.39-.139.58-.217.202-.082.403-.169.6-.262.218-.103.434-.212.644-.33.301-.168.595-.351.879-.548.345-.237.678-.494.995-.77.335-.292.654-.605.95-.938.311-.35.599-.722.86-1.114.324-.488.608-1.006.846-1.546.271-.616.49-1.258.649-1.92.174-.729.278-1.477.31-2.234.03-.718-.014-1.439-.132-2.143-.114-.68-.306-1.342-.57-1.97-.252-.596-.575-1.157-.958-1.672-.37-.497-.797-.947-1.273-1.347-.978-.83-2.152-1.412-3.46-1.71-.631-.143-1.28-.211-1.933-.225C12.815.001 12.659 0 12.504 0z"/></svg>`,
+  chromeos: `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C8.21 0 4.831 1.757 2.632 4.501l3.953 6.848A5.454 5.454 0 0 1 12 6.545h10.691A12 12 0 0 0 12 0zM1.931 5.47A11.943 11.943 0 0 0 0 12c0 6.012 4.42 10.991 10.189 11.864l3.953-6.847a5.45 5.45 0 0 1-6.865-2.29zm13.342 2.166a5.446 5.446 0 0 1 1.45 7.09l.002.001h-.002l-3.952 6.848a12.014 12.014 0 0 0 9.229-9.006zM12 16.364a4.364 4.364 0 1 1 0-8.728 4.364 4.364 0 0 1 0 8.728z"/></svg>`,
+  other: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>`,
+}
+
+const osColors: Record<string, string> = {
+  windows: 'bg-blue-100 text-blue-600',
+  macos: 'bg-gray-100 text-gray-700',
+  ios: 'bg-gray-100 text-gray-700',
+  android: 'bg-green-100 text-green-600',
+  linux: 'bg-amber-100 text-amber-600',
+  chromeos: 'bg-yellow-100 text-yellow-600',
+  other: 'bg-gray-100 text-gray-600',
+}
+
+const sortedSystems = [...systems].sort((a, b) => b.value - a.value)
+
+function getOSIcon(name: string): string {
+  const key = name.toLowerCase().replace(/\s+/g, '')
+  if (key.includes('windows'))
+    return osIcons.windows
+  if (key.includes('mac') || key.includes('osx'))
+    return osIcons.macos
+  if (key.includes('ios') || key.includes('iphone') || key.includes('ipad'))
+    return osIcons.ios
+  if (key.includes('android'))
+    return osIcons.android
+  if (key.includes('linux') || key.includes('ubuntu') || key.includes('debian'))
+    return osIcons.linux
+  if (key.includes('chrome'))
+    return osIcons.chromeos
+  return osIcons.other
+}
+
+function getOSColor(name: string): string {
+  const key = name.toLowerCase().replace(/\s+/g, '')
+  if (key.includes('windows'))
+    return osColors.windows
+  if (key.includes('mac') || key.includes('osx'))
+    return osColors.macos
+  if (key.includes('ios') || key.includes('iphone') || key.includes('ipad'))
+    return osColors.ios
+  if (key.includes('android'))
+    return osColors.android
+  if (key.includes('linux') || key.includes('ubuntu') || key.includes('debian'))
+    return osColors.linux
+  if (key.includes('chrome'))
+    return osColors.chromeos
+  return osColors.other
+}
+</script>
+
+<div class="os-breakdown card-hover p-6">
+  <h3 class="text-sm font-medium text-gray-900 mb-4">
+    Operating Systems
+  </h3>
+
+  @if (loading)
+    <div class="space-y-4">
+      @foreach ([1, 2, 3, 4] as i)
+        <div class="animate-pulse flex items-center gap-4">
+          <div class="skeleton w-10 h-10 rounded-lg"></div>
+          <div class="flex-1">
+            <div class="skeleton h-4 w-20 mb-2"></div>
+            <div class="skeleton h-2 w-full"></div>
+          </div>
+        </div>
+      @endforeach
+    </div>
+  @elseif (!systems.length)
+    <div class="text-center py-8 text-gray-500">
+      No OS data available
+    </div>
+  @else
+    <div class="space-y-4">
+      @foreach (sortedSystems as system)
+        <div class="flex items-center gap-4">
+          <div
+            class="w-10 h-10 rounded-lg flex items-center justify-center {{ getOSColor(system.name) }}"
+          >{!! getOSIcon(system.name) !!}</div>
+          <div class="flex-1">
+            <div class="flex items-center justify-between">
+              <span class="font-medium text-gray-900">{{ system.name }}</span>
+              <span class="text-sm text-gray-600">{{ formatPercentage(system.percentage) }}</span>
+            </div>
+            <div class="progress-bar mt-1">
+              <div
+                class="progress-fill bg-gray-400"
+                style="width: {{ system.percentage * 100 }}%"
+              ></div>
+            </div>
+          </div>
+        </div>
+      @endforeach
+    </div>
+  @endif
+</div>

package/src/dashboard/components/PageDetailCard.stx

@@ -0,0 +1,102 @@
+<script server>
+/**
+ * PageDetailCard Component
+ *
+ * Displays detailed metrics for a specific page.
+ */
+import { defineProps, withDefaults } from 'stx'
+import { formatCompact, formatDuration, formatPercentage } from '../utils'
+
+export interface PageDetail {
+  path: string
+  title?: string
+  pageViews: number
+  uniquePageViews: number
+  avgTimeOnPage: number
+  bounceRate: number
+  exitRate: number
+  entrances: number
+  exits: number
+  change?: number
+}
+
+interface PageDetailCardProps {
+  page: PageDetail | null
+  loading?: boolean
+  showSparkline?: boolean
+}
+
+const { page, loading, showSparkline } = withDefaults(
+  defineProps<PageDetailCardProps>(),
+  {
+    loading: false,
+    showSparkline: false,
+  }
+)
+
+const metrics = page ? [
+  { label: 'Page Views', value: formatCompact(page.pageViews), icon: 'M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z', isNegative: false },
+  { label: 'Unique Views', value: formatCompact(page.uniquePageViews), icon: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z', isNegative: false },
+  { label: 'Avg. Time', value: formatDuration(page.avgTimeOnPage), icon: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z', isNegative: false },
+  { label: 'Bounce Rate', value: formatPercentage(page.bounceRate), icon: 'M13 7h8m0 0v8m0-8l-8 8-4-4-6 6', isNegative: page.bounceRate > 0.5 },
+  { label: 'Exit Rate', value: formatPercentage(page.exitRate), icon: 'M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1', isNegative: false },
+  { label: 'Entrances', value: formatCompact(page.entrances), icon: 'M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1', isNegative: false },
+] : []
+</script>
+
+<div class="page-detail-card card-hover p-6">
+  @if (loading)
+    <div class="animate-pulse">
+      <div class="skeleton h-6 w-3/4 mb-2"></div>
+      <div class="skeleton h-4 w-1/2 mb-6"></div>
+      <div class="grid grid-cols-3 gap-4">
+        @foreach ([1, 2, 3, 4, 5, 6] as i)
+          <div>
+            <div class="skeleton h-4 w-16 mb-2"></div>
+            <div class="skeleton h-6 w-12"></div>
+          </div>
+        @endforeach
+      </div>
+    </div>
+  @elseif (!page)
+    <div class="text-center py-8 text-gray-500">
+      Select a page to view details
+    </div>
+  @else
+    <div class="mb-6">
+      <div class="flex items-start justify-between gap-4">
+        <div class="min-w-0">
+          <h3 class="text-lg font-semibold text-gray-900 truncate" title="{{ page.path }}">
+            {{ page.title ? page.title : page.path }}
+          </h3>
+          <p class="text-sm text-gray-500 truncate mt-0.5" title="{{ page.path }}">
+            {{ page.path }}
+          </p>
+        </div>
+        @if (page.change !== undefined)
+          <span
+            class="flex-shrink-0 px-2 py-1 text-xs font-medium rounded-full {{ page.change >= 0 ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}"
+          >
+            {{ page.change >= 0 ? '+' : '' }}{{ page.change.toFixed(1) }}%
+          </span>
+        @endif
+      </div>
+    </div>
+
+    <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
+      @foreach (metrics as metric)
+        <div class="p-3 bg-gray-50 rounded-lg">
+          <div class="flex items-center gap-2 text-xs text-gray-500 mb-1">
+            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ metric.icon }}" />
+            </svg>
+            {{ metric.label }}
+          </div>
+          <div class="text-lg font-semibold {{ metric.isNegative ? 'text-red-600' : 'text-gray-900' }}">
+            {{ metric.value }}
+          </div>
+        </div>
+      @endforeach
+    </div>
+  @endif
+</div>