@stacksjs/defaults 0.70.229 → 0.70.230

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

@@ -1,536 +1,8 @@
 @extends('layouts/default')
 
 @section('content')
-@title('Dashboard - Events & Goals')
+@title('Dashboard - Event 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>
-      <select x-model="selectedDateRange" class="block pl-3 pr-10 py-1.5 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">
-        <template :for="range in dateRanges">
-          <option :value="range.id">{{ range.name }}</option>
-        </template>
-      </select>
-      <span class="text-gray-500 text-sm dark:text-neutral-400">{{ 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>
-      <select x-model="comparisonType" class="block pl-3 pr-10 py-1.5 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">
-        <option value="no-comparison">No comparison</option>
-        <option value="previous-period">Previous period</option>
-        <option value="previous-year">Previous year</option>
-      </select>
-    </div>
-  </div>
-
-  <div class="mb-8">
-    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4">
-      <h2 class="font-semibold text-gray-900 text-xl dark:text-white">Events & Goals</h2>
-      <div class="flex items-center mt-2 space-x-2 sm:mt-0">
-        <button @click="openCreateEvent()" class="inline-flex items-center px-3 py-2 font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md shadow-sm">
-          <div class="mr-1 h-4 w-4 i-hugeicons-plus-sign"></div>
-          Create Event
-        </button>
-      </div>
-    </div>
-
-    <div class="mb-6 p-4 bg-gray-50 dark:bg-neutral-800 rounded-lg">
-      <div class="flex flex-col gap-4 sm:flex-row sm:items-center">
-        <span class="font-medium text-gray-700 text-sm dark:text-neutral-300">Calculate conversion rates using:</span>
-        <div class="flex items-center space-x-4">
-          <label class="inline-flex items-center">
-            <input type="radio" x-model="conversionCalculationType" value="pageviews" class="h-4 w-4 text-blue-600 border-gray-300 dark:border-neutral-600 focus:ring-blue-500" />
-            <span class="ml-2 text-gray-700 text-sm dark:text-neutral-300">Page views</span>
-          </label>
-          <label class="inline-flex items-center">
-            <input type="radio" x-model="conversionCalculationType" value="people" class="h-4 w-4 text-blue-600 border-gray-300 dark:border-neutral-600 focus:ring-blue-500" />
-            <span class="ml-2 text-gray-700 text-sm dark:text-neutral-300">People</span>
-          </label>
-        </div>
-        <div class="text-gray-500 text-xs dark:text-neutral-400">{{ conversionFormula() }}</div>
-      </div>
-    </div>
-
-    <div class="overflow-hidden bg-white dark:bg-neutral-800 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">Event Name</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">Completions</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">Value</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">Conversion Rate</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">Last Triggered</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">Actions</th>
-          </tr>
-        </thead>
-        <tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
-          <template :for="event in activeEvents">
-            <tr @click="viewEventDetails(event.id)" class="hover:bg-gray-50 dark:hover:bg-neutral-700/50 cursor-pointer">
-              <td class="px-4 py-3 font-medium text-gray-900 text-sm whitespace-nowrap dark:text-white">{{ event.name }}</td>
-              <td class="px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">{{ formatNumber(event.completions) }}</td>
-              <td class="px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">{{ formatCurrency(event.value) }}</td>
-              <td class="px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">{{ event.conversionRate }}%</td>
-              <td class="px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">{{ formatDateOrDash(event.lastTriggered) }}</td>
-              <td class="px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">
-                <button @click.stop="confirmDelete(event.id)" class="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300">
-                  <div class="h-4 w-4 i-hugeicons-waste"></div>
-                </button>
-              </td>
-            </tr>
-          </template>
-          <tr :show="activeEvents().length === 0">
-            <td colspan="6" class="px-4 py-8 text-center text-gray-500 text-sm dark:text-neutral-400">
-              <div class="flex flex-col items-center justify-center">
-                <div class="mb-2 h-12 w-12 text-gray-300 dark:text-neutral-600 i-hugeicons-chart-01"></div>
-                <p class="mb-1">No events found</p>
-                <p class="text-xs">Create your first event to start tracking conversions</p>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-
-  <div class="mb-8 p-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
-    <div class="mb-4">
-      <h3 class="font-medium text-gray-900 text-lg dark:text-white">Event Implementation Guide</h3>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Learn how to track events and conversions on your website</p>
-    </div>
-    <div class="space-y-6">
-      <div>
-        <h4 class="mb-2 font-medium text-gray-900 text-md dark:text-white">Basic Event Tracking</h4>
-        <div class="overflow-x-auto p-4 text-white bg-gray-800 rounded-lg">
-          <pre class="text-sm"><code>// Track a simple event
-stacks.trackEvent('newsletter signup');</code></pre>
-        </div>
-      </div>
-      <div>
-        <h4 class="mb-2 font-medium text-gray-900 text-md dark:text-white">Track Events with Value</h4>
-        <div class="overflow-x-auto p-4 text-white bg-gray-800 rounded-lg">
-          <pre class="text-sm"><code>// Track an event with monetary value (in cents)
-stacks.trackEvent('purchase completed', {
-  _value: 1000, // $10.00
-});</code></pre>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div :show="blockedEvents().length > 0" class="mb-8">
-    <div class="flex items-center justify-between mb-4">
-      <h3 class="font-medium text-gray-900 text-lg dark:text-white">Blocked Events</h3>
-    </div>
-    <div class="overflow-hidden bg-white dark:bg-neutral-800 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">Event Name</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">Completions</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">Created</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">Actions</th>
-          </tr>
-        </thead>
-        <tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
-          <template :for="event in blockedEvents">
-            <tr class="hover:bg-gray-50 dark:hover:bg-neutral-700/50">
-              <td class="px-4 py-3 font-medium text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">
-                <div class="flex items-center">
-                  <div class="mr-2 h-4 w-4 text-red-500 i-hugeicons-blocked"></div>
-                  {{ event.name }}
-                </div>
-              </td>
-              <td class="px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-400">{{ formatNumber(event.completions) }}</td>
-              <td class="px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-400">{{ formatDateOrDash(event.createdAt) }}</td>
-              <td class="px-4 py-3 text-right text-sm whitespace-nowrap">
-                <div class="flex justify-end space-x-2">
-                  <button @click="unblockEvent(event.id)" class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">Unblock</button>
-                  <button @click="confirmDelete(event.id)" class="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300">Delete</button>
-                </div>
-              </td>
-            </tr>
-          </template>
-        </tbody>
-      </table>
-    </div>
-  </div>
-
-  <div :show="showEventDetails()" @click.self="closeEventDetails()" class="flex fixed inset-0 z-50 items-center justify-center p-4 bg-black bg-opacity-50">
-    <div class="overflow-y-auto p-6 max-h-[90vh] w-full sm:max-w-3xl bg-white dark:bg-neutral-800 rounded-lg shadow-xl">
-      <div class="flex items-start justify-between">
-        <div>
-          <h3 class="font-semibold text-gray-900 text-xl dark:text-white">{{ selectedEvent()?.name }}</h3>
-          <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Created on {{ formatDateOrDash(selectedEvent()?.createdAt) }}</p>
-        </div>
-        <button @click="closeEventDetails()" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300">
-          <i class="h-6 w-6 i-hugeicons-cancel-01"></i>
-        </button>
-      </div>
-
-      <div class="grid gap-4 grid-cols-1 sm:grid-cols-3 mt-6">
-        <div class="p-4 bg-gray-50 dark:bg-neutral-700 rounded-lg">
-          <div class="text-gray-500 text-sm dark:text-neutral-400">Completions</div>
-          <div class="font-bold text-2xl text-gray-900 dark:text-white">{{ formatNumber(selectedEvent()?.completions ?? 0) }}</div>
-        </div>
-        <div class="p-4 bg-gray-50 dark:bg-neutral-700 rounded-lg">
-          <div class="text-gray-500 text-sm dark:text-neutral-400">Conversion Rate</div>
-          <div class="font-bold text-2xl text-gray-900 dark:text-white">{{ selectedEvent()?.conversionRate ?? 0 }}%</div>
-        </div>
-        <div class="p-4 bg-gray-50 dark:bg-neutral-700 rounded-lg">
-          <div class="text-gray-500 text-sm dark:text-neutral-400">Value</div>
-          <div class="font-bold text-2xl text-gray-900 dark:text-white">{{ formatCurrency(selectedEvent()?.value ?? 0) }}</div>
-        </div>
-      </div>
-
-      <div class="mt-6 p-4 bg-white dark:bg-neutral-700 rounded-lg shadow">
-        <h4 class="font-medium text-gray-900 text-md dark:text-white">Recent Activity</h4>
-        <div class="mt-2 h-64 w-full"><canvas id="event_details_chart"></canvas></div>
-      </div>
-
-      <div class="mt-6">
-        <h4 class="mb-2 font-medium text-gray-900 text-md dark:text-white">Implementation Code</h4>
-        <div class="overflow-x-auto p-4 text-white bg-gray-800 rounded-lg">
-          <pre class="text-sm"><code>// Basic event tracking
-stacks.trackEvent('{{ selectedEventName() }}');
-
-// With value (for e-commerce)
-stacks.trackEvent('{{ selectedEventName() }}', {
-  _value: 1000, // Value in cents
-});</code></pre>
-        </div>
-      </div>
-
-      <div class="flex justify-end mt-6">
-        <button @click="closeEventDetails()" class="inline-flex justify-center mr-2 px-3 py-2 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">Close</button>
-        <button @click="confirmDeleteSelected()" class="inline-flex justify-center px-3 py-2 font-semibold text-sm text-white bg-red-600 hover:bg-red-500 rounded-md shadow-sm">Delete Event</button>
-      </div>
-    </div>
-  </div>
-
-  <div :show="showCreateEventModal()" @click.self="closeCreateEvent()" class="flex fixed inset-0 z-50 items-center justify-center p-4 bg-black bg-opacity-50">
-    <div class="overflow-y-auto p-6 max-h-[90vh] w-full sm:max-w-lg bg-white dark:bg-neutral-800 rounded-lg shadow-xl">
-      <div class="flex items-start justify-between">
-        <div>
-          <h3 class="font-semibold text-gray-900 text-xl dark:text-white">Create New Event</h3>
-          <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Set up a new event to track conversions on your site</p>
-        </div>
-        <button @click="closeCreateEvent()" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300">
-          <i class="h-6 w-6 i-hugeicons-cancel-01"></i>
-        </button>
-      </div>
-
-      <div class="mt-6 space-y-4">
-        <div>
-          <label for="eventName" class="block mb-1 font-medium text-gray-700 text-sm dark:text-neutral-300">Event Name</label>
-          <input id="eventName" x-model="newEventName" type="text" placeholder="e.g., Newsletter Signup" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 shadow-sm" />
-          <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">Use a descriptive name without special characters or emojis</p>
-        </div>
-
-        <div class="flex items-center">
-          <input id="hasValue" :checked="newEventHasValue" @change="toggleNewEventHasValue()" type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded dark:border-neutral-600 focus:ring-blue-500" />
-          <label for="hasValue" class="block ml-2 text-gray-700 text-sm dark:text-neutral-300">This event has a monetary value (e.g., purchase)</label>
-        </div>
-
-        <div :show="newEventHasValue()">
-          <label for="currency" class="block mb-1 font-medium text-gray-700 text-sm dark:text-neutral-300">Currency</label>
-          <select id="currency" x-model="newEventCurrency" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 shadow-sm">
-            <option value="USD">USD - US Dollar</option>
-            <option value="EUR">EUR - Euro</option>
-            <option value="GBP">GBP - British Pound</option>
-            <option value="CAD">CAD - Canadian Dollar</option>
-            <option value="AUD">AUD - Australian Dollar</option>
-          </select>
-        </div>
-      </div>
-
-      <div class="flex justify-end mt-6">
-        <button @click="closeCreateEvent()" class="inline-flex justify-center mr-2 px-3 py-2 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">Cancel</button>
-        <button @click="createEvent()" :disabled="!newEventName()" class="inline-flex justify-center px-3 py-2 font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md shadow-sm disabled:opacity-50">Create Event</button>
-      </div>
-    </div>
-  </div>
-
-  <div :show="showDeleteConfirmModal()" @click.self="cancelDelete()" class="flex fixed inset-0 z-50 items-center justify-center p-4 bg-black bg-opacity-50">
-    <div class="overflow-y-auto p-6 max-h-[90vh] w-full sm:max-w-lg bg-white dark:bg-neutral-800 rounded-lg shadow-xl">
-      <div class="flex items-center justify-center mx-auto h-12 w-12 bg-red-100 dark:bg-red-900 rounded-full">
-        <div class="h-6 w-6 text-red-600 dark:text-red-400 i-hugeicons-alert-02"></div>
-      </div>
-      <div class="mt-3 text-center">
-        <h3 class="font-semibold text-gray-900 text-xl dark:text-white">{{ deleteConfirmTitle() }}</h3>
-        <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">{{ deleteConfirmMessage() }}</p>
-      </div>
-      <div class="flex justify-end mt-6">
-        <button @click="cancelDelete()" class="inline-flex justify-center mr-2 px-3 py-2 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">Cancel</button>
-        <button @click="deleteEvent()" class="inline-flex justify-center px-3 py-2 font-semibold text-sm text-white bg-red-600 hover:bg-red-500 rounded-md shadow-sm">{{ deleteConfirmButtonLabel() }}</button>
-      </div>
-    </div>
-  </div>
+  <EventAnalytics />
 </PageLayout>
-
-<script client>
-// Date range options — moved out of the former `<script server>` block
-// (stacksjs/stacks#1838).
-const dateRanges = [
-  { id: 'last7days', name: 'Last 7 Days' },
-  { id: 'last30days', name: 'Last 30 Days' },
-  { id: 'thisMonth', name: 'This Month' },
-  { id: 'lastMonth', name: 'Last Month' },
-  { id: 'thisYear', name: 'This Year' },
-]
-
-interface Event {
-  id: string
-  name: string
-  completions: number
-  value: number
-  conversionRate: number
-  status: 'active' | 'blocked'
-  createdAt: string
-  lastTriggered: string
-}
-
-interface EventChartData { date: string, completions: number, value: number }
-
-interface ChartLike { destroy: () => void, update: () => void, data: { labels: string[], datasets: Array<{ label?: string, data: number[] }> } }
-type ChartCtor = new (canvas: HTMLElement, config: { type: string, data: unknown, options?: unknown }) => ChartLike
-
-const initialEvents: Event[] = [
-  { id: '1', name: 'Newsletter Signup', completions: 342, value: 0, conversionRate: 15.5, status: 'active', createdAt: '2023-11-15', lastTriggered: '2024-03-05' },
-  { id: '2', name: 'Free Trial Started', completions: 128, value: 0, conversionRate: 5.8, status: 'active', createdAt: '2023-11-20', lastTriggered: '2024-03-06' },
-  { id: '3', name: 'Purchase Completed', completions: 87, value: 8700, conversionRate: 3.9, status: 'active', createdAt: '2023-12-01', lastTriggered: '2024-03-06' },
-  { id: '4', name: 'Contact Form Submitted', completions: 215, value: 0, conversionRate: 9.8, status: 'active', createdAt: '2023-12-05', lastTriggered: '2024-03-05' },
-  { id: '5', name: 'Documentation Downloaded', completions: 156, value: 0, conversionRate: 7.1, status: 'active', createdAt: '2024-01-10', lastTriggered: '2024-03-04' },
-  { id: '6', name: 'Checkout Started', completions: 203, value: 0, conversionRate: 9.2, status: 'active', createdAt: '2024-01-15', lastTriggered: '2024-03-06' },
-  { id: '7', name: '404: /old-page', completions: 42, value: 0, conversionRate: 1.9, status: 'blocked', createdAt: '2024-02-01', lastTriggered: '2024-02-28' },
-]
-
-const eventChartSeries: Record<string, EventChartData[]> = {
-  1: [{ date: '2024-03-01', completions: 12, value: 0 }, { date: '2024-03-02', completions: 15, value: 0 }, { date: '2024-03-03', completions: 10, value: 0 }, { date: '2024-03-04', completions: 18, value: 0 }, { date: '2024-03-05', completions: 22, value: 0 }, { date: '2024-03-06', completions: 14, value: 0 }],
-  2: [{ date: '2024-03-01', completions: 5, value: 0 }, { date: '2024-03-02', completions: 7, value: 0 }, { date: '2024-03-03', completions: 4, value: 0 }, { date: '2024-03-04', completions: 6, value: 0 }, { date: '2024-03-05', completions: 8, value: 0 }, { date: '2024-03-06', completions: 5, value: 0 }],
-  3: [{ date: '2024-03-01', completions: 3, value: 300 }, { date: '2024-03-02', completions: 5, value: 500 }, { date: '2024-03-03', completions: 2, value: 200 }, { date: '2024-03-04', completions: 4, value: 400 }, { date: '2024-03-05', completions: 6, value: 600 }, { date: '2024-03-06', completions: 4, value: 400 }],
-}
-
-const events = state<Event[]>(initialEvents)
-const selectedDateRange = state('last30days')
-const comparisonType = state('no-comparison')
-const conversionCalculationType = state<'pageviews' | 'people'>('pageviews')
-
-const selectedEventId = state<string | null>(null)
-const showCreateModal = state(false)
-const newEventName = state('')
-const newEventHasValue = state(false)
-const newEventCurrency = state('USD')
-
-const eventToDeleteId = state<string | null>(null)
-
-const activeEvents = derived(() => events().filter(e => e.status === 'active'))
-const blockedEvents = derived(() => events().filter(e => e.status === 'blocked'))
-
-const selectedEvent = derived(() => events().find(e => e.id === selectedEventId()) ?? null)
-const selectedEventName = derived(() => selectedEvent()?.name ?? '')
-
-const showEventDetails = derived(() => selectedEvent() !== null)
-const showCreateEventModal = derived(() => showCreateModal())
-const showDeleteConfirmModal = derived(() => eventToDeleteId() !== null)
-
-const eventToDelete = derived(() => events().find(e => e.id === eventToDeleteId()) ?? null)
-
-const dateRangeDisplay = derived(() => {
-  const fmt = (d: Date) => d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
-  const now = new Date()
-  const range = selectedDateRange()
-  if (range === 'last7days') {
-    const start = new Date()
-    start.setDate(now.getDate() - 7)
-    return `${fmt(start)} → ${fmt(now)}`
-  }
-  if (range === 'last30days') {
-    const start = new Date()
-    start.setDate(now.getDate() - 30)
-    return `${fmt(start)} → ${fmt(now)}`
-  }
-  if (range === 'thisMonth')
-    return `${fmt(new Date(now.getFullYear(), now.getMonth(), 1))} → ${fmt(now)}`
-  if (range === 'lastMonth') {
-    const start = new Date(now.getFullYear(), now.getMonth() - 1, 1)
-    const end = new Date(now.getFullYear(), now.getMonth(), 0)
-    return `${fmt(start)} → ${fmt(end)}`
-  }
-  if (range === 'thisYear')
-    return `${fmt(new Date(now.getFullYear(), 0, 1))} → ${fmt(now)}`
-  return ''
-})
-
-const conversionFormula = derived(() =>
-  conversionCalculationType() === 'pageviews'
-    ? 'Formula: Event completions / total Page views'
-    : 'Formula: Event completions / total People',
-)
-
-const deleteConfirmTitle = derived(() => eventToDelete()?.status === 'active' ? 'Block Event' : 'Delete Event')
-const deleteConfirmButtonLabel = derived(() => eventToDelete()?.status === 'active' ? 'Block Event' : 'Delete Event')
-const deleteConfirmMessage = derived(() => {
-  const ev = eventToDelete()
-  if (!ev)
-    return ''
-  return ev.status === 'active'
-    ? `Are you sure you want to block "${ev.name}"? This will prevent data collection for this event in the future.`
-    : `Are you sure you want to permanently delete "${ev.name}"? This action cannot be undone.`
-})
-
-function formatNumber(value: number): string {
-  return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-}
-
-function formatCurrency(value: number, currency = 'USD'): string {
-  if (!value)
-    return '-'
-  return new Intl.NumberFormat('en-US', { style: 'currency', currency, minimumFractionDigits: 2 }).format(value / 100)
-}
-
-function formatDateOrDash(value: string | undefined | null): string {
-  if (!value || value === '-')
-    return '-'
-  return new Date(value).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })
-}
-
-function viewEventDetails(id: string) {
-  selectedEventId.set(id)
-}
-
-function closeEventDetails() {
-  selectedEventId.set(null)
-}
-
-function openCreateEvent() {
-  newEventName.set('')
-  newEventHasValue.set(false)
-  newEventCurrency.set('USD')
-  showCreateModal.set(true)
-}
-
-function closeCreateEvent() {
-  showCreateModal.set(false)
-}
-
-function toggleNewEventHasValue() {
-  newEventHasValue.set(!newEventHasValue())
-}
-
-function createEvent() {
-  const name = newEventName().trim()
-  if (!name)
-    return
-  const nextId = (Math.max(0, ...events().map(e => Number.parseInt(e.id, 10))) + 1).toString()
-  events.set([...events(), {
-    id: nextId,
-    name,
-    completions: 0,
-    value: 0,
-    conversionRate: 0,
-    status: 'active',
-    createdAt: new Date().toISOString().split('T')[0]!,
-    lastTriggered: '-',
-  }])
-  closeCreateEvent()
-}
-
-function confirmDelete(id: string) {
-  eventToDeleteId.set(id)
-}
-
-function confirmDeleteSelected() {
-  const id = selectedEventId()
-  if (id)
-    eventToDeleteId.set(id)
-}
-
-function cancelDelete() {
-  eventToDeleteId.set(null)
-}
-
-function deleteEvent() {
-  const target = eventToDelete()
-  if (!target)
-    return
-  if (target.status === 'active') {
-    events.set(events().map(e => e.id === target.id ? { ...e, status: 'blocked' } : e))
-  }
-  else {
-    events.set(events().filter(e => e.id !== target.id))
-  }
-  if (selectedEventId() === target.id)
-    selectedEventId.set(null)
-  eventToDeleteId.set(null)
-}
-
-function unblockEvent(id: string) {
-  events.set(events().map(e => e.id === id ? { ...e, status: 'active' } : e))
-}
-
-let chartHandle: ChartLike | null = null
-
-async function ensureChartLib() {
-  const { Chart, registerables } = await import('@stacksjs/charts')
-  Chart.register(...registerables)
-  return Chart as unknown as ChartCtor
-}
-
-async function renderEventChart() {
-  const event = selectedEvent()
-  if (!event)
-    return
-  chartHandle?.destroy()
-  chartHandle = null
-  const Ctor = await ensureChartLib()
-  const series = eventChartSeries[event.id] ?? []
-  const labels = series.map(item => {
-    const d = new Date(item.date)
-    return `${d.getMonth() + 1}/${d.getDate()}`
-  })
-  const handle = useChart({
-    Chart: Ctor,
-    id: 'event_details_chart',
-    type: 'line',
-    data: {
-      labels,
-      datasets: [{
-        label: 'Completions',
-        data: series.map(s => s.completions),
-        backgroundColor: 'rgba(59, 130, 246, 0.3)',
-        borderColor: 'rgba(59, 130, 246, 0.8)',
-        borderWidth: 2,
-        tension: 0.4,
-        fill: true,
-      }],
-    },
-    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: { precision: 0 } },
-      },
-      plugins: { legend: { display: false }, tooltip: { mode: 'index', intersect: false } },
-    },
-  })
-  chartHandle = handle.instance as ChartLike | null
-}
-
-effect(() => {
-  if (selectedEvent())
-    queueMicrotask(() => renderEventChart())
-  else {
-    chartHandle?.destroy()
-    chartHandle = null
-  }
-})
-
-onDestroy(() => {
-  chartHandle?.destroy()
-  chartHandle = null
-})
-</script>
-
 @endsection

package/views/dashboard/analytics/index.stx

@@ -1,88 +1,8 @@
 @extends('layouts/default')
 
 @section('content')
-<script client>
-// Analytics Dashboard - macOS Style.
-// Hub list — moved out of the former `<script server>` block
-// (stacksjs/stacks#1838).
-const analyticsCards = [
-  { name: 'Web Analytics', description: 'Page views, sessions, and user behavior', icon: 'i-hugeicons-chart-line-data-02', to: '/analytics/web' },
-  { name: 'Blog Analytics', description: 'Post performance and engagement', icon: 'i-hugeicons-edit-02', to: '/analytics/blog' },
-  { name: 'Commerce Analytics', description: 'Sales and revenue insights', icon: 'i-hugeicons-shopping-cart-01', to: '/analytics/commerce/sales' },
-  { name: 'Marketing Analytics', description: 'Campaign performance', icon: 'i-hugeicons-megaphone-02', to: '/analytics/marketing' },
-  { name: 'Events', description: 'Custom event tracking', icon: 'i-hugeicons-calendar-03', to: '/analytics/events' },
-  { name: 'Referrers', description: 'Traffic sources', icon: 'i-hugeicons-link-01', to: '/analytics/referrers' },
-  { name: 'Pages', description: 'Top performing pages', icon: 'i-hugeicons-file-02', to: '/analytics/pages' },
-  { name: 'Countries', description: 'Geographic distribution', icon: 'i-hugeicons-globe-02', to: '/analytics/countries' },
-  { name: 'Devices', description: 'Device breakdown', icon: 'i-hugeicons-smart-phone-01', to: '/analytics/devices' },
-  { name: 'Browsers', description: 'Browser usage', icon: 'i-hugeicons-browser', to: '/analytics/browsers' },
-]
-</script>
-
 @title('Dashboard - Analytics')
-<div>
-  <!-- Overview Stats -->
-  <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 mb-6">
-    <StatsCard
-      title="Page Views"
-      value="124,892"
-      :trend="12"
-      trendLabel="vs last month"
-      icon="i-hugeicons-chart-line-data-02"
-      iconBg="primary"
-    />
-    <StatsCard
-      title="Unique Visitors"
-      value="45,231"
-      :trend="8"
-      trendLabel="vs last month"
-      icon="i-hugeicons-user-multiple-02"
-      iconBg="success"
-    />
-    <StatsCard
-      title="Avg. Session"
-      value="4m 32s"
-      :trend="-5"
-      trendLabel="vs last month"
-      icon="i-hugeicons-clock-01"
-      iconBg="info"
-    />
-    <StatsCard
-      title="Bounce Rate"
-      value="32.4%"
-      :trend="-3"
-      trendLabel="Lower is better"
-      icon="i-hugeicons-logout-02"
-      iconBg="neutral"
-    />
-  </div>
-
-  <!-- Analytics Sections -->
-  <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
-    <template :for="card in analyticsCards">
-      <StxLink
-        :to="card.to"
-        class="block"
-      >
-        <Card variant="default" padding="md" hoverable clickable>
-          <div class="flex gap-4 items-start">
-            <div class="flex-shrink-0 p-2.5 text-blue-600 dark:text-blue-400 bg-blue-500/15 dark:bg-blue-400/20 rounded-lg">
-              <div :class="card.icon" class="h-5 w-5" />
-            </div>
-            <div class="flex-1 min-w-0">
-              <h3 class="font-medium text-[14px] text-neutral-900 dark:text-white">
-                {{ card.name }}
-              </h3>
-              <p class="mt-1 text-[12px] text-neutral-500 dark:text-neutral-400">
-                {{ card.description }}
-              </p>
-            </div>
-            <div class="flex-shrink-0 h-4 w-4 text-neutral-400 i-hugeicons-arrow-right-01" />
-          </div>
-        </Card>
-      </StxLink>
-    </template>
-  </div>
-</div>
-
+<PageLayout>
+  <AnalyticsHub />
+</PageLayout>
 @endsection