@stacksjs/ts-analytics 0.1.6

package/src/dashboard/demo/DemoApp.stx

@@ -0,0 +1,370 @@
+<script setup lang="ts">
+/**
+ * Analytics Dashboard Demo App
+ *
+ * Showcases all 31 dashboard components with mock data.
+ */
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import {
+  AlertCard,
+  AnimatedNumber,
+  AnalyticsDashboard,
+  BarChart,
+  BrowserBreakdown,
+  CampaignBreakdown,
+  CountryList,
+  DataTable,
+  DateRangePicker,
+  DeviceBreakdown,
+  DonutChart,
+  EmptyState,
+  EngagementMetrics,
+  FilterBar,
+  FunnelChart,
+  GoalsPanel,
+  HeatmapChart,
+  LiveActivityFeed,
+  MetricComparison,
+  MiniStats,
+  OSBreakdown,
+  PageDetailCard,
+  ProgressRing,
+  RealtimeCounter,
+  SparklineChart,
+  StatCard,
+  ThemeSwitcher,
+  TimeSeriesChart,
+  TopList,
+  TrendIndicator,
+} from '../components'
+import { mockData } from './mockData'
+
+// Theme state
+const isDark = ref(false)
+
+// Date range state
+const dateRange = ref({
+  start: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
+  end: new Date(),
+})
+
+// Active section for navigation
+const activeSection = ref('overview')
+
+// Realtime simulation
+const realtimeCount = ref(42)
+const activities = ref(mockData.activities)
+
+let realtimeInterval: ReturnType<typeof setInterval> | null = null
+
+onMounted(() => {
+  // Simulate realtime updates
+  realtimeInterval = setInterval(() => {
+    realtimeCount.value = Math.floor(Math.random() * 50) + 20
+
+    // Add random activity
+    if (Math.random() > 0.5) {
+      const types = ['pageview', 'event', 'conversion', 'session_start'] as const
+      const newActivity = {
+        id: `act-${Date.now()}`,
+        type: types[Math.floor(Math.random() * types.length)],
+        page: mockData.pages[Math.floor(Math.random() * mockData.pages.length)],
+        country: mockData.countries[Math.floor(Math.random() * mockData.countries.length)].name,
+        countryCode: mockData.countries[Math.floor(Math.random() * mockData.countries.length)].code,
+        device: (['desktop', 'mobile', 'tablet'] as const)[Math.floor(Math.random() * 3)],
+        timestamp: new Date(),
+      }
+      activities.value = [newActivity, ...activities.value.slice(0, 19)]
+    }
+  }, 3000)
+})
+
+onUnmounted(() => {
+  if (realtimeInterval) clearInterval(realtimeInterval)
+})
+
+const sections = [
+  { id: 'overview', label: 'Overview' },
+  { id: 'charts', label: 'Charts' },
+  { id: 'breakdowns', label: 'Breakdowns' },
+  { id: 'tables', label: 'Tables & Lists' },
+  { id: 'engagement', label: 'Engagement' },
+  { id: 'utilities', label: 'Utilities' },
+]
+
+function handleDateChange(range: { start: Date, end: Date }) {
+  dateRange.value = range
+}
+</script>
+
+<template>
+  <div class="min-h-screen" x-class="isDark ? 'dark bg-gray-900' : 'bg-gray-50'">
+    <!-- Header -->
+    <header class="sticky top-0 z-50 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex items-center justify-between h-16">
+          <div class="flex items-center gap-4">
+            <h1 class="text-xl font-bold text-gray-900 dark:text-white">
+              Analytics Dashboard Demo
+            </h1>
+            <span class="px-2 py-1 text-xs font-medium bg-primary-100 text-primary-700 rounded-full">
+              31 Components
+            </span>
+          </div>
+          <div class="flex items-center gap-4">
+            <DateRangePicker
+              :start="dateRange.start"
+              :end="dateRange.end"
+              @change="handleDateChange"
+            />
+            <ThemeSwitcher v-model="isDark" />
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <!-- Navigation -->
+    <nav class="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex gap-4 overflow-x-auto py-3">
+          <button
+            v-for="section in sections"
+            :key="section.id"
+            class="px-4 py-2 text-sm font-medium rounded-lg whitespace-nowrap transition-colors"
+            x-class="activeSection === section.id
+              ? 'bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-300'
+              : 'text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700'"
+            @click="activeSection = section.id"
+          >
+            {{ section.label }}
+          </button>
+        </div>
+      </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <!-- Overview Section -->
+      <section v-show="activeSection === 'overview'" class="space-y-8">
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Overview Components</h2>
+
+        <!-- Realtime Counter -->
+        <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
+          <RealtimeCounter :count="realtimeCount" label="Active Visitors" />
+        </div>
+
+        <!-- Stat Cards -->
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          <StatCard
+            v-for="stat in mockData.stats"
+            :key="stat.label"
+            :label="stat.label"
+            x-value="stat.value"
+            :change="stat.change"
+            :icon="stat.icon"
+          />
+        </div>
+
+        <!-- Mini Stats -->
+        <MiniStats :stats="mockData.miniStats" />
+
+        <!-- Animated Numbers -->
+        <div class="card p-6">
+          <h3 class="text-sm font-medium text-gray-900 dark:text-white mb-4">Animated Numbers</h3>
+          <div class="flex gap-8">
+            <div>
+              <div class="text-3xl font-bold text-gray-900 dark:text-white">
+                <AnimatedNumber x-value="12847" format="compact" />
+              </div>
+              <div class="text-sm text-gray-500">Total Users</div>
+            </div>
+            <div>
+              <div class="text-3xl font-bold text-green-600">
+                <AnimatedNumber x-value="0.0847" format="percentage" />
+              </div>
+              <div class="text-sm text-gray-500">Conversion Rate</div>
+            </div>
+            <div>
+              <div class="text-3xl font-bold text-primary-600">
+                <AnimatedNumber x-value="48293" format="currency" />
+              </div>
+              <div class="text-sm text-gray-500">Revenue</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Metric Comparison -->
+        <MetricComparison
+          :metrics="mockData.comparisonMetrics"
+          title="Period Comparison"
+        />
+      </section>
+
+      <!-- Charts Section -->
+      <section v-show="activeSection === 'charts'" class="space-y-8">
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Chart Components</h2>
+
+        <!-- Time Series -->
+        <TimeSeriesChart
+          :data="mockData.timeSeries"
+          title="Visitors Over Time"
+          x-height="300"
+        />
+
+        <!-- Chart Grid -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <DonutChart
+            :data="mockData.donutData"
+            title="Traffic Sources"
+          />
+          <BarChart
+            :data="mockData.barData"
+            title="Top Pages"
+          />
+        </div>
+
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <FunnelChart
+            :steps="mockData.funnelSteps"
+            title="Conversion Funnel"
+          />
+          <HeatmapChart
+            :data="mockData.heatmapData"
+            title="Activity by Hour"
+          />
+        </div>
+
+        <!-- Sparklines -->
+        <div class="card p-6">
+          <h3 class="text-sm font-medium text-gray-900 dark:text-white mb-4">Sparkline Charts</h3>
+          <div class="grid grid-cols-2 lg:grid-cols-4 gap-6">
+            <div v-for="spark in mockData.sparklines" :key="spark.label">
+              <div class="text-sm text-gray-500 mb-1">{{ spark.label }}</div>
+              <SparklineChart :data="spark.data" :color="spark.color" x-height="40" />
+            </div>
+          </div>
+        </div>
+
+        <!-- Progress Rings -->
+        <div class="card p-6">
+          <h3 class="text-sm font-medium text-gray-900 dark:text-white mb-4">Progress Rings</h3>
+          <div class="flex gap-8">
+            <ProgressRing x-value="0.75" label="Goal Progress" :size="100" />
+            <ProgressRing x-value="0.42" label="Bounce Rate" color="#ef4444" :size="100" />
+            <ProgressRing x-value="0.91" label="Uptime" color="#10b981" :size="100" />
+          </div>
+        </div>
+      </section>
+
+      <!-- Breakdowns Section -->
+      <section v-show="activeSection === 'breakdowns'" class="space-y-8">
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Breakdown Components</h2>
+
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          <DeviceBreakdown :data="mockData.devices" />
+          <BrowserBreakdown :browsers="mockData.browsers" />
+          <OSBreakdown :data="mockData.operatingSystems" />
+        </div>
+
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <CountryList :countries="mockData.countryList" />
+          <CampaignBreakdown :campaigns="mockData.campaigns" />
+        </div>
+      </section>
+
+      <!-- Tables Section -->
+      <section v-show="activeSection === 'tables'" class="space-y-8">
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Table & List Components</h2>
+
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <TopList
+            :items="mockData.topPages"
+            title="Top Pages"
+            value-label="Views"
+          />
+          <TopList
+            :items="mockData.topReferrers"
+            title="Top Referrers"
+            value-label="Visitors"
+          />
+        </div>
+
+        <DataTable
+          :columns="mockData.tableColumns"
+          :rows="mockData.tableRows"
+          title="Detailed Analytics"
+        />
+
+        <PageDetailCard :page="mockData.pageDetail" />
+      </section>
+
+      <!-- Engagement Section -->
+      <section v-show="activeSection === 'engagement'" class="space-y-8">
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Engagement Components</h2>
+
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <GoalsPanel :goals="mockData.goals" />
+          <EngagementMetrics :metrics="mockData.engagementMetrics" />
+        </div>
+
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <LiveActivityFeed :activities="activities" />
+          <AlertCard
+            v-for="alert in mockData.alerts"
+            :key="alert.id"
+            :title="alert.title"
+            :message="alert.message"
+            :type="alert.type"
+            :timestamp="alert.timestamp"
+          />
+        </div>
+      </section>
+
+      <!-- Utilities Section -->
+      <section v-show="activeSection === 'utilities'" class="space-y-8">
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Utility Components</h2>
+
+        <!-- Filter Bar -->
+        <FilterBar
+          :filters="mockData.filters"
+          @change="(f) => console.log('Filters changed:', f)"
+        />
+
+        <!-- Trend Indicators -->
+        <div class="card p-6">
+          <h3 class="text-sm font-medium text-gray-900 dark:text-white mb-4">Trend Indicators</h3>
+          <div class="flex gap-8">
+            <TrendIndicator x-value="0.15" label="vs last week" />
+            <TrendIndicator x-value="-0.08" label="vs last month" />
+            <TrendIndicator x-value="0" label="vs yesterday" />
+          </div>
+        </div>
+
+        <!-- Empty States -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          <EmptyState
+            title="No data available"
+            message="Start tracking to see your analytics data here."
+            icon="chart"
+          />
+          <EmptyState
+            title="No visitors yet"
+            message="Share your site to start getting visitors."
+            icon="users"
+          />
+          <EmptyState
+            title="No goals configured"
+            message="Set up conversion goals to track success."
+            icon="target"
+            action-label="Create Goal"
+            @action="() => console.log('Create goal clicked')"
+          />
+        </div>
+      </section>
+    </main>
+  </div>
+</template>
+
+<style>
+@import 'uno.css';
+</style>

package/src/dashboard/demo/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Analytics Dashboard Demo
+ *
+ * Demo application showcasing all 31 dashboard components.
+ */
+
+export { default as DemoApp } from './DemoApp.stx'
+export { mockData } from './mockData'

package/src/dashboard/demo/mockData.ts

@@ -0,0 +1,234 @@
+/**
+ * Mock Data for Dashboard Demo
+ *
+ * Realistic sample data for showcasing all dashboard components.
+ */
+
+export const mockData = {
+  // Stat Cards
+  stats: [
+    { label: 'Total Visitors', value: 24847, change: 0.12, icon: 'users' },
+    { label: 'Page Views', value: 89234, change: 0.08, icon: 'eye' },
+    { label: 'Bounce Rate', value: '42.3%', change: -0.05, icon: 'arrow-down' },
+    { label: 'Avg. Duration', value: '3m 24s', change: 0.15, icon: 'clock' },
+  ],
+
+  // Mini Stats
+  miniStats: [
+    { label: 'Sessions', value: 12847, change: 0.08 },
+    { label: 'Users', value: 8234, change: 0.12 },
+    { label: 'New Users', value: 3421, change: 0.24 },
+    { label: 'Events', value: 45892, change: -0.03 },
+  ],
+
+  // Comparison Metrics
+  comparisonMetrics: [
+    { label: 'Visitors', current: 24847, previous: 22134, format: 'number' as const },
+    { label: 'Bounce Rate', current: 0.423, previous: 0.456, format: 'percentage' as const, inverse: true },
+    { label: 'Avg. Duration', current: 204000, previous: 178000, format: 'duration' as const },
+    { label: 'Conversions', current: 847, previous: 723, format: 'number' as const },
+  ],
+
+  // Time Series
+  timeSeries: Array.from({ length: 30 }, (_, i) => {
+    const date = new Date()
+    date.setDate(date.getDate() - (29 - i))
+    return {
+      date: date.toISOString().slice(0, 10),
+      visitors: Math.floor(Math.random() * 500) + 800,
+      pageViews: Math.floor(Math.random() * 1500) + 2000,
+    }
+  }),
+
+  // Donut Chart
+  donutData: [
+    { label: 'Direct', value: 4234, color: '#3b82f6' },
+    { label: 'Organic Search', value: 3456, color: '#10b981' },
+    { label: 'Social', value: 2134, color: '#8b5cf6' },
+    { label: 'Referral', value: 1234, color: '#f59e0b' },
+    { label: 'Email', value: 567, color: '#ef4444' },
+  ],
+
+  // Bar Chart
+  barData: [
+    { label: '/home', value: 12847 },
+    { label: '/products', value: 8923 },
+    { label: '/about', value: 5634 },
+    { label: '/blog', value: 4521 },
+    { label: '/contact', value: 2134 },
+  ],
+
+  // Funnel Steps
+  funnelSteps: [
+    { label: 'Visitors', value: 10000, color: '#3b82f6' },
+    { label: 'Product Views', value: 6500, color: '#8b5cf6' },
+    { label: 'Add to Cart', value: 3200, color: '#f59e0b' },
+    { label: 'Checkout', value: 1800, color: '#10b981' },
+    { label: 'Purchase', value: 850, color: '#ef4444' },
+  ],
+
+  // Heatmap Data (7 days x 24 hours)
+  heatmapData: Array.from({ length: 7 }, (_, day) =>
+    Array.from({ length: 24 }, (_, hour) => ({
+      day,
+      hour,
+      value: Math.floor(Math.random() * 100),
+    }))).flat(),
+
+  // Sparklines
+  sparklines: [
+    { label: 'Visitors', data: Array.from({ length: 14 }, () => Math.floor(Math.random() * 100) + 50), color: '#3b82f6' },
+    { label: 'Conversions', data: Array.from({ length: 14 }, () => Math.floor(Math.random() * 30) + 10), color: '#10b981' },
+    { label: 'Bounce Rate', data: Array.from({ length: 14 }, () => Math.floor(Math.random() * 20) + 30), color: '#ef4444' },
+    { label: 'Duration', data: Array.from({ length: 14 }, () => Math.floor(Math.random() * 60) + 120), color: '#8b5cf6' },
+  ],
+
+  // Device Breakdown
+  devices: [
+    { type: 'desktop', count: 12847, percentage: 0.52 },
+    { type: 'mobile', count: 9234, percentage: 0.37 },
+    { type: 'tablet', count: 2766, percentage: 0.11 },
+  ],
+
+  // Browser Breakdown
+  browsers: [
+    { name: 'Chrome', count: 14523, percentage: 0.58, icon: 'chrome' },
+    { name: 'Safari', count: 5234, percentage: 0.21, icon: 'safari' },
+    { name: 'Firefox', count: 2847, percentage: 0.11, icon: 'firefox' },
+    { name: 'Edge', count: 1823, percentage: 0.07, icon: 'edge' },
+    { name: 'Other', count: 420, percentage: 0.03, icon: 'globe' },
+  ],
+
+  // OS Breakdown
+  operatingSystems: [
+    { name: 'Windows', count: 10234, percentage: 0.41 },
+    { name: 'macOS', count: 7823, percentage: 0.31 },
+    { name: 'iOS', count: 4234, percentage: 0.17 },
+    { name: 'Android', count: 2134, percentage: 0.09 },
+    { name: 'Linux', count: 422, percentage: 0.02 },
+  ],
+
+  // Country List
+  countryList: [
+    { name: 'United States', code: 'US', visitors: 8234, percentage: 0.33 },
+    { name: 'United Kingdom', code: 'GB', visitors: 3456, percentage: 0.14 },
+    { name: 'Germany', code: 'DE', visitors: 2847, percentage: 0.11 },
+    { name: 'France', code: 'FR', visitors: 2134, percentage: 0.09 },
+    { name: 'Canada', code: 'CA', visitors: 1823, percentage: 0.07 },
+    { name: 'Australia', code: 'AU', visitors: 1234, percentage: 0.05 },
+    { name: 'Japan', code: 'JP', visitors: 987, percentage: 0.04 },
+    { name: 'Brazil', code: 'BR', visitors: 756, percentage: 0.03 },
+  ],
+
+  // Campaigns
+  campaigns: [
+    { name: 'Summer Sale', source: 'google', medium: 'cpc', visitors: 3456, conversions: 234, conversionRate: 0.068, revenue: 12340 },
+    { name: 'Newsletter', source: 'email', medium: 'email', visitors: 2134, conversions: 187, conversionRate: 0.088, revenue: 8923 },
+    { name: 'Social Launch', source: 'facebook', medium: 'social', visitors: 1823, conversions: 98, conversionRate: 0.054, revenue: 4521 },
+    { name: 'Retargeting', source: 'google', medium: 'display', visitors: 1234, conversions: 76, conversionRate: 0.062, revenue: 3456 },
+  ],
+
+  // Top Pages
+  topPages: [
+    { name: '/home', value: 12847, change: 0.12 },
+    { name: '/products', value: 8923, change: 0.08 },
+    { name: '/products/widget', value: 5634, change: 0.24 },
+    { name: '/about', value: 4521, change: -0.05 },
+    { name: '/blog', value: 3847, change: 0.15 },
+    { name: '/contact', value: 2134, change: 0.03 },
+    { name: '/pricing', value: 1823, change: 0.18 },
+    { name: '/docs', value: 1456, change: 0.09 },
+  ],
+
+  // Top Referrers
+  topReferrers: [
+    { name: 'google.com', value: 8234, change: 0.15 },
+    { name: 'twitter.com', value: 3456, change: 0.22 },
+    { name: 'facebook.com', value: 2847, change: -0.08 },
+    { name: 'linkedin.com', value: 1823, change: 0.12 },
+    { name: 'reddit.com', value: 1234, change: 0.45 },
+    { name: 'github.com', value: 987, change: 0.08 },
+  ],
+
+  // Table Data
+  tableColumns: [
+    { key: 'page', label: 'Page', sortable: true },
+    { key: 'visitors', label: 'Visitors', sortable: true, align: 'right' as const },
+    { key: 'pageViews', label: 'Page Views', sortable: true, align: 'right' as const },
+    { key: 'bounceRate', label: 'Bounce Rate', sortable: true, align: 'right' as const },
+    { key: 'avgDuration', label: 'Avg. Duration', sortable: true, align: 'right' as const },
+  ],
+  tableRows: [
+    { page: '/home', visitors: 12847, pageViews: 24532, bounceRate: '38.2%', avgDuration: '2m 45s' },
+    { page: '/products', visitors: 8923, pageViews: 15234, bounceRate: '42.1%', avgDuration: '3m 12s' },
+    { page: '/about', visitors: 5634, pageViews: 7823, bounceRate: '52.3%', avgDuration: '1m 34s' },
+    { page: '/blog', visitors: 4521, pageViews: 12847, bounceRate: '35.6%', avgDuration: '4m 56s' },
+    { page: '/contact', visitors: 2134, pageViews: 3456, bounceRate: '48.7%', avgDuration: '1m 23s' },
+  ],
+
+  // Page Detail
+  pageDetail: {
+    path: '/products/widget-pro',
+    title: 'Widget Pro - Premium Analytics Widget',
+    pageViews: 12847,
+    uniquePageViews: 8923,
+    avgTimeOnPage: 234000,
+    bounceRate: 0.382,
+    exitRate: 0.456,
+    entrances: 5634,
+    exits: 5823,
+    change: 0.15,
+  },
+
+  // Goals
+  goals: [
+    { id: '1', name: 'Sign Up', conversions: 847, conversionRate: 0.034, value: 8470, target: 1000 },
+    { id: '2', name: 'Purchase', conversions: 234, conversionRate: 0.0094, value: 23400, target: 300 },
+    { id: '3', name: 'Newsletter', conversions: 1234, conversionRate: 0.05, value: 0, target: 1500 },
+    { id: '4', name: 'Contact Form', conversions: 456, conversionRate: 0.018, value: 0, target: 500 },
+  ],
+
+  // Engagement Metrics
+  engagementMetrics: {
+    avgSessionDuration: 234000,
+    pagesPerSession: 3.4,
+    bounceRate: 0.423,
+    returningVisitors: 0.34,
+    newVisitors: 0.66,
+    engagedSessions: 0.72,
+  },
+
+  // Live Activity
+  activities: [
+    { id: '1', type: 'pageview' as const, page: '/products', country: 'United States', countryCode: 'US', device: 'desktop' as const, timestamp: new Date() },
+    { id: '2', type: 'conversion' as const, eventName: 'Sign Up', country: 'Germany', countryCode: 'DE', device: 'mobile' as const, timestamp: new Date(Date.now() - 15000), value: 10 },
+    { id: '3', type: 'event' as const, eventName: 'Add to Cart', country: 'United Kingdom', countryCode: 'GB', device: 'tablet' as const, timestamp: new Date(Date.now() - 30000) },
+    { id: '4', type: 'session_start' as const, country: 'France', countryCode: 'FR', device: 'desktop' as const, timestamp: new Date(Date.now() - 45000) },
+    { id: '5', type: 'pageview' as const, page: '/blog/analytics-tips', country: 'Canada', countryCode: 'CA', device: 'mobile' as const, timestamp: new Date(Date.now() - 60000) },
+  ],
+
+  // Alerts
+  alerts: [
+    { id: '1', title: 'Traffic Spike', message: 'Visitor count increased by 150% in the last hour.', type: 'success' as const, timestamp: new Date() },
+    { id: '2', title: 'High Bounce Rate', message: '/landing page has 75% bounce rate today.', type: 'warning' as const, timestamp: new Date(Date.now() - 3600000) },
+  ],
+
+  // Filters
+  filters: [
+    { id: 'device', label: 'Device', options: ['All', 'Desktop', 'Mobile', 'Tablet'], value: 'All' },
+    { id: 'country', label: 'Country', options: ['All', 'United States', 'United Kingdom', 'Germany'], value: 'All' },
+    { id: 'source', label: 'Source', options: ['All', 'Direct', 'Organic', 'Social', 'Referral'], value: 'All' },
+  ],
+
+  // Helper arrays
+  pages: ['/home', '/products', '/about', '/blog', '/contact', '/pricing', '/docs'],
+  countries: [
+    { name: 'United States', code: 'US' },
+    { name: 'United Kingdom', code: 'GB' },
+    { name: 'Germany', code: 'DE' },
+    { name: 'France', code: 'FR' },
+    { name: 'Canada', code: 'CA' },
+  ],
+}
+
+export default mockData