@stacksjs/defaults 0.70.207 → 0.70.208

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

@@ -0,0 +1,536 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Events & Goals')
+<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>
+</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

@@ -0,0 +1,88 @@
+@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>
+
+@endsection