@stacksjs/defaults 0.70.207 → 0.70.208

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

@@ -0,0 +1,315 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Commerce Marketing Analytics')
+<PageLayout>
+      <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between mb-6">
+        <div class="flex items-center space-x-2">
+          <div class="h-5 w-5 text-gray-500 dark:text-neutral-400 i-hugeicons-calendar-03"></div>
+          <span class="font-medium text-gray-700 text-sm dark:text-neutral-300">{{ dateRangeDisplay }}</span>
+        </div>
+
+        <div class="flex flex-wrap gap-2 items-center">
+          <span class="text-gray-500 text-sm dark:text-neutral-400">compared to</span>
+          <div class="relative">
+            <select x-model="comparisonType" class="block pl-3 pr-10 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600 focus:ring-inset">
+              <option value="no-comparison">No comparison</option>
+              <option value="previous-period">Previous period</option>
+              <option value="previous-year">Previous year</option>
+            </select>
+          </div>
+          <button type="button" class="inline-flex items-center px-3 py-1.5 font-semibold text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 hover:bg-gray-50 dark:hover:bg-neutral-600 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 shadow-sm">
+            <div class="mr-1 h-4 w-4 i-hugeicons-settings-01"></div>
+            Auto
+          </button>
+        </div>
+      </div>
+
+      <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 mb-8 p-4 bg-black dark:bg-neutral-900 rounded-lg">
+        <div class="flex flex-col items-center justify-center">
+          <div class="font-bold text-4xl text-white">$125k</div>
+          <div class="text-gray-400 text-sm">Total Spend</div>
+        </div>
+        <div class="flex flex-col items-center justify-center">
+          <div class="font-bold text-4xl text-white">$375k</div>
+          <div class="text-gray-400 text-sm">Total Revenue</div>
+        </div>
+        <div class="flex flex-col items-center justify-center">
+          <div class="font-bold text-4xl text-white">{{ marketingOverview.roi }}%</div>
+          <div class="text-gray-400 text-sm">ROI</div>
+        </div>
+        <div class="flex flex-col items-center justify-center">
+          <div class="font-bold text-4xl text-white">7.5k</div>
+          <div class="text-gray-400 text-sm">Conversions</div>
+        </div>
+        <div class="flex flex-col items-center justify-center">
+          <div class="font-bold text-4xl text-white">${{ marketingOverview.cpa.toFixed(2) }}</div>
+          <div class="text-gray-400 text-sm">Cost Per Acquisition</div>
+        </div>
+        <div class="flex flex-col items-center justify-center">
+          <div class="font-bold text-4xl text-white">{{ marketingOverview.conversionRate }}</div>
+          <div class="text-gray-400 text-sm">Conversion Rate</div>
+        </div>
+      </div>
+
+      <div class="mb-8 p-4 bg-white dark:bg-neutral-800 rounded-lg shadow">
+        <div class="mb-4">
+          <h3 class="font-medium leading-6 text-gray-900 text-lg dark:text-white">Marketing Performance</h3>
+          <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Revenue vs. marketing spend over time</p>
+        </div>
+        <div class="h-80 w-full">
+          <canvas id="marketing_chart"></canvas>
+        </div>
+      </div>
+
+      <div class="grid gap-8 grid-cols-1 lg:grid-cols-2">
+        <div>
+          <div class="mb-4"><h3 class="font-medium text-gray-900 text-lg dark:text-white">Campaigns</h3></div>
+          <div class="overflow-hidden border border-gray-200 rounded-lg dark:border-neutral-700">
+            <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+              <thead class="bg-gray-50 dark:bg-neutral-700/50">
+                <tr>
+                  <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Campaign</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">Spend</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">Revenue</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">ROI</th>
+                  <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">%</th>
+                </tr>
+              </thead>
+              <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+                <template :for="campaign in campaignsData">
+                  <tr class="relative hover:bg-gray-50 dark:hover:bg-neutral-700/50">
+                    <td class="px-4 py-3 text-gray-900 text-sm whitespace-nowrap dark:text-white">
+                      <div class="absolute inset-0 bg-rose-100/50 dark:bg-rose-900/50" :style="'width: ' + campaign.percentage + '%'"></div>
+                      <span class="relative z-10">{{ campaign.name }}</span>
+                      <span class="block relative z-10 text-gray-500 text-xs dark:text-neutral-400">{{ campaign.id }}</span>
+                    </td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ formatCurrency(campaign.spend) }}</span></td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ formatCurrency(campaign.revenue) }}</span></td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ campaign.roi }}%</span></td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ campaign.percentage }}%</span></td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+          <div class="flex justify-end mt-2">
+            <StxLink to="/dashboard/commerce/analytics/marketing/campaigns" class="text-blue-600 text-sm dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">View all campaigns</StxLink>
+          </div>
+        </div>
+
+        <div>
+          <div class="mb-4"><h3 class="font-medium text-gray-900 text-lg dark:text-white">Channels</h3></div>
+          <div class="overflow-hidden border border-gray-200 rounded-lg dark:border-neutral-700">
+            <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+              <thead class="bg-gray-50 dark:bg-neutral-700/50">
+                <tr>
+                  <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Channel</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">Spend</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">Revenue</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">ROI</th>
+                  <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">%</th>
+                </tr>
+              </thead>
+              <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+                <template :for="channel in channelsData">
+                  <tr class="relative hover:bg-gray-50 dark:hover:bg-neutral-700/50">
+                    <td class="px-4 py-3 text-gray-900 text-sm whitespace-nowrap dark:text-white">
+                      <div class="absolute inset-0 bg-blue-100/50 dark:bg-blue-900/50" :style="'width: ' + channel.percentage + '%'"></div>
+                      <span class="relative z-10">{{ channel.name }}</span>
+                    </td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ formatCurrency(channel.spend) }}</span></td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ formatCurrency(channel.revenue) }}</span></td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ channel.roi }}%</span></td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ channel.percentage }}%</span></td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+          <div class="flex justify-end mt-2">
+            <StxLink to="/dashboard/commerce/analytics/marketing/channels" class="text-blue-600 text-sm dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">View all channels</StxLink>
+          </div>
+        </div>
+      </div>
+
+      <div class="mt-8">
+        <div class="mb-4"><h3 class="font-medium text-gray-900 text-lg dark:text-white">Top Performing Ads</h3></div>
+        <div class="overflow-hidden border border-gray-200 rounded-lg dark:border-neutral-700">
+          <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+            <thead class="bg-gray-50 dark:bg-neutral-700/50">
+              <tr>
+                <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Ad</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">Impressions</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">Clicks</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">CTR</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">Conversions</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">CPA</th>
+                <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">%</th>
+              </tr>
+            </thead>
+            <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+              <template :for="ad in adsData">
+                <tr class="relative hover:bg-gray-50 dark:hover:bg-neutral-700/50">
+                  <td class="px-4 py-3 text-gray-900 text-sm whitespace-nowrap dark:text-white">
+                    <div class="absolute inset-0 bg-purple-100/50 dark:bg-purple-900/50" :style="'width: ' + ad.percentage + '%'"></div>
+                    <span class="relative z-10">{{ ad.name }}</span>
+                    <span class="block relative z-10 text-gray-500 text-xs dark:text-neutral-400">{{ ad.id }}</span>
+                  </td>
+                  <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ formatNumber(ad.impressions) }}</span></td>
+                  <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ formatNumber(ad.clicks) }}</span></td>
+                  <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ ad.ctr }}%</span></td>
+                  <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ formatNumber(ad.conversions) }}</span></td>
+                  <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">${{ ad.cpa }}</span></td>
+                  <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ ad.percentage }}%</span></td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+        <div class="flex justify-end mt-2">
+          <StxLink to="/dashboard/commerce/analytics/marketing/ads" class="text-blue-600 text-sm dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">View all ads</StxLink>
+        </div>
+      </div>
+</PageLayout>
+<script client>
+
+interface ChartLike { destroy: () => void }
+type ChartCtor = new (canvas: HTMLElement, config: { type: string, data: unknown, options?: unknown }) => ChartLike
+
+// Static analytics tables + overview — moved out of the former
+// `<script server>` block (stacksjs/stacks#1838).
+const campaignsRaw = [
+  { name: 'Summer Sale 2024', id: 'SUMMER24', spend: 25000, revenue: 75000, roi: 200, conversions: 1500 },
+  { name: 'New Product Launch', id: 'NEWPROD', spend: 20000, revenue: 60000, roi: 200, conversions: 1200 },
+  { name: 'Holiday Special', id: 'HOLIDAY', spend: 18000, revenue: 54000, roi: 200, conversions: 1080 },
+  { name: 'Back to School', id: 'SCHOOL', spend: 15000, revenue: 45000, roi: 200, conversions: 900 },
+  { name: 'Flash Sale', id: 'FLASH', spend: 12000, revenue: 36000, roi: 200, conversions: 720 },
+  { name: 'Loyalty Program', id: 'LOYALTY', spend: 10000, revenue: 30000, roi: 200, conversions: 600 },
+  { name: 'Referral Program', id: 'REFERRAL', spend: 8000, revenue: 24000, roi: 200, conversions: 480 },
+  { name: 'Email Newsletter', id: 'EMAIL', spend: 7000, revenue: 21000, roi: 200, conversions: 420 },
+  { name: 'Retargeting Campaign', id: 'RETARGET', spend: 6000, revenue: 18000, roi: 200, conversions: 360 },
+  { name: 'Social Media Contest', id: 'CONTEST', spend: 4000, revenue: 12000, roi: 200, conversions: 240 },
+]
+
+const channelsRaw = [
+  { name: 'Paid Search', spend: 35000, revenue: 105000, roi: 200, conversions: 2100 },
+  { name: 'Social Media', spend: 30000, revenue: 90000, roi: 200, conversions: 1800 },
+  { name: 'Email Marketing', spend: 20000, revenue: 60000, roi: 200, conversions: 1200 },
+  { name: 'Display Ads', spend: 15000, revenue: 45000, roi: 200, conversions: 900 },
+  { name: 'Affiliate Marketing', spend: 10000, revenue: 30000, roi: 200, conversions: 600 },
+  { name: 'Influencer Marketing', spend: 8000, revenue: 24000, roi: 200, conversions: 480 },
+  { name: 'Content Marketing', spend: 5000, revenue: 15000, roi: 200, conversions: 300 },
+  { name: 'SMS Marketing', spend: 2000, revenue: 6000, roi: 200, conversions: 120 },
+]
+
+const adsRaw = [
+  { name: 'Summer Sale Banner', id: 'AD-001', impressions: 250000, clicks: 12500, ctr: 5, conversions: 625, cpa: 16 },
+  { name: 'Product Showcase Video', id: 'AD-002', impressions: 200000, clicks: 10000, ctr: 5, conversions: 500, cpa: 16 },
+  { name: 'Limited Time Offer', id: 'AD-003', impressions: 180000, clicks: 9000, ctr: 5, conversions: 450, cpa: 16 },
+  { name: 'Customer Testimonial', id: 'AD-004', impressions: 150000, clicks: 7500, ctr: 5, conversions: 375, cpa: 16 },
+  { name: 'Free Shipping Promo', id: 'AD-005', impressions: 120000, clicks: 6000, ctr: 5, conversions: 300, cpa: 16 },
+]
+
+const totalCampaignRevenue = campaignsRaw.reduce((s, c) => s + c.revenue, 0)
+const totalChannelRevenue = channelsRaw.reduce((s, c) => s + c.revenue, 0)
+const totalAdConversions = adsRaw.reduce((s, a) => s + a.conversions, 0)
+
+const campaignsData = campaignsRaw.map(c => ({ ...c, percentage: Math.round((c.revenue / totalCampaignRevenue) * 100) }))
+const channelsData = channelsRaw.map(c => ({ ...c, percentage: Math.round((c.revenue / totalChannelRevenue) * 100) }))
+const adsData = adsRaw.map(a => ({ ...a, percentage: Math.round((a.conversions / totalAdConversions) * 100) }))
+
+const marketingOverview = {
+  roi: 200,
+  cpa: 16.67,
+  conversionRate: '3.2%',
+}
+
+function formatNumber(n) {
+  return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+}
+
+function formatCurrency(amount) {
+  return `$${amount.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
+}
+
+const dateRangeDisplay = state('All Time: Sep 7, 2023 to Mar 6, 2025')
+const comparisonType = state('no-comparison')
+
+const marketingData = state<Array<{ date: string, spend: number, revenue: number }>>([
+  { date: '2023-11-01', spend: 5000, revenue: 15000 },
+  { date: '2023-12-01', spend: 6000, revenue: 18000 },
+  { date: '2024-01-01', spend: 7000, revenue: 21000 },
+  { date: '2024-02-01', spend: 8000, revenue: 24000 },
+  { date: '2024-03-01', spend: 10000, revenue: 30000 },
+  { date: '2024-04-01', spend: 9000, revenue: 27000 },
+  { date: '2024-05-01', spend: 8000, revenue: 24000 },
+  { date: '2024-06-01', spend: 7000, revenue: 21000 },
+  { date: '2024-07-01', spend: 8000, revenue: 24000 },
+  { date: '2024-08-01', spend: 7000, revenue: 21000 },
+  { date: '2024-09-01', spend: 7000, revenue: 21000 },
+  { date: '2024-10-01', spend: 8000, revenue: 24000 },
+  { date: '2024-11-01', spend: 6000, revenue: 18000 },
+  { date: '2024-12-01', spend: 12000, revenue: 36000 },
+  { date: '2025-01-01', spend: 7000, revenue: 21000 },
+  { date: '2025-02-01', spend: 5000, revenue: 15000 },
+])
+
+let chartHandle: { destroy: () => void } | null = null
+
+onMount(async () => {
+  const { Chart, registerables } = await import('@stacksjs/charts')
+  Chart.register(...registerables)
+  const Ctor = Chart as unknown as ChartCtor
+
+  chartHandle = useChart({
+    Chart: Ctor,
+    id: 'marketing_chart',
+    type: 'line',
+    data: {
+      labels: marketingData().map(item => item.date),
+      datasets: [
+        { label: 'Revenue ($)', data: marketingData().map(item => item.revenue), backgroundColor: 'rgba(16, 185, 129, 0.3)', borderColor: 'rgba(16, 185, 129, 0.8)', borderWidth: 2, tension: 0.4, fill: true, yAxisID: 'y' },
+        { label: 'Spend ($)', data: marketingData().map(item => item.spend), backgroundColor: 'rgba(244, 63, 94, 0.1)', borderColor: 'rgba(244, 63, 94, 0.8)', borderWidth: 2, tension: 0.4, fill: false, yAxisID: 'y' },
+      ],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        x: { grid: { display: false }, ticks: { maxTicksLimit: 4 } },
+        y: { type: 'linear', display: true, position: 'left', beginAtZero: true, grid: { borderDash: [2, 4], color: 'rgba(160, 174, 192, 0.2)' }, ticks: { maxTicksLimit: 6, callback: (value: number | string) => `$${Number(value).toLocaleString()}` } },
+      },
+      plugins: {
+        legend: { display: true, position: 'top' },
+        tooltip: {
+          mode: 'index',
+          intersect: false,
+          callbacks: {
+            label(context: { dataset: { label?: string }, parsed: { y: number } }) {
+              let label = context.dataset.label || ''
+              if (label)
+                label += ': '
+              label += `$${context.parsed.y.toLocaleString()}`
+              return label
+            },
+          },
+        },
+      },
+    },
+  })
+})
+
+onDestroy(() => {
+  chartHandle?.destroy()
+  chartHandle = null
+})
+</script>
+
+<style scoped>
+.commerce-marketing {
+  @apply space-y-6;
+}
+</style>
+
+@endsection

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

@@ -0,0 +1,271 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Page Analytics')
+<PageLayout>
+      <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between mb-6">
+        <div class="flex items-center space-x-2">
+          <div class="h-5 w-5 text-gray-500 dark:text-neutral-400 i-hugeicons-calendar-03"></div>
+          <span class="font-medium text-gray-700 text-sm dark:text-neutral-300">{{ dateRangeDisplay }}</span>
+        </div>
+
+        <div class="flex flex-wrap gap-2 items-center">
+          <span class="text-gray-500 text-sm dark:text-neutral-400">compared to</span>
+          <div class="relative">
+            <select x-model="comparisonType" class="block pl-3 pr-10 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600 focus:ring-inset">
+              <option value="no-comparison">No comparison</option>
+              <option value="previous-period">Previous period</option>
+              <option value="previous-year">Previous year</option>
+            </select>
+          </div>
+          <button type="button" class="inline-flex items-center px-3 py-1.5 font-semibold text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 hover:bg-gray-50 dark:hover:bg-neutral-600 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 shadow-sm">
+            <div class="mr-1 h-4 w-4 i-hugeicons-settings-01"></div>
+            Auto
+          </button>
+        </div>
+      </div>
+
+      <div class="mb-8">
+        <h1 class="font-bold text-2xl text-gray-900 dark:text-white">Page Analytics</h1>
+        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Detailed breakdown of page performance and visitor engagement</p>
+      </div>
+
+      <div class="mb-8 p-4 bg-white dark:bg-neutral-800 rounded-lg shadow">
+        <div class="mb-4">
+          <h3 class="font-medium leading-6 text-gray-900 text-lg dark:text-white">Page Views Trend</h3>
+          <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Page views and visitors over time</p>
+        </div>
+        <div class="h-80 w-full">
+          <canvas id="pageViewsTrendChart"></canvas>
+        </div>
+      </div>
+
+      <div class="mb-8 p-4 bg-white dark:bg-neutral-800 rounded-lg shadow">
+        <div class="mb-4">
+          <h3 class="font-medium leading-6 text-gray-900 text-lg dark:text-white">Top Pages</h3>
+          <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Most viewed pages on your website</p>
+        </div>
+        <div class="h-80 w-full">
+          <canvas id="topPagesChart"></canvas>
+        </div>
+      </div>
+
+      <div class="mb-8">
+        <div class="mb-4">
+          <h3 class="font-medium text-gray-900 text-lg dark:text-white">All Pages</h3>
+        </div>
+
+        <div class="overflow-hidden border border-gray-200 rounded-lg dark:border-neutral-700">
+          <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+            <thead class="bg-gray-50 dark:bg-neutral-700/50">
+              <tr>
+                <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Page</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">Entries</th>
+                <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Visitors</th>
+                <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Views</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">Avg. Time</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">Bounce 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">%</th>
+              </tr>
+            </thead>
+            <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+              <template :for="page in pagesData">
+                <tr class="relative hover:bg-gray-50 dark:hover:bg-neutral-700/50">
+                  <td class="px-4 py-3 text-gray-900 text-sm whitespace-nowrap dark:text-white">
+                    <div class="absolute inset-0 bg-blue-100/50 dark:bg-blue-900/50" style="width: {{ page.percentage }}%"></div>
+                    <span class="relative z-10">{{ page.path }}</span>
+                  </td>
+                  <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">
+                    <span class="relative z-10">{{ page.entries }}</span>
+                  </td>
+                  <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">
+                    <span class="relative z-10">{{ page.visitors }}</span>
+                  </td>
+                  <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">
+                    <span class="relative z-10">{{ page.views }}</span>
+                  </td>
+                  <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">
+                    <span class="relative z-10">{{ page.avgTimeOnPage }}</span>
+                  </td>
+                  <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">
+                    <span class="relative z-10">{{ page.bounceRate }}</span>
+                  </td>
+                  <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">
+                    <span class="relative z-10">{{ page.percentage }}%</span>
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div>
+        <div class="mb-4">
+          <h3 class="font-medium text-gray-900 text-lg dark:text-white">Page Performance</h3>
+          <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Core Web Vitals and performance metrics</p>
+        </div>
+
+        <div class="overflow-hidden border border-gray-200 rounded-lg dark:border-neutral-700">
+          <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+            <thead class="bg-gray-50 dark:bg-neutral-700/50">
+              <tr>
+                <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Page</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">Load Time (s)</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">FCP (s)</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">LCP (s)</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">CLS</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">Score</th>
+              </tr>
+            </thead>
+            <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+              <template :for="page in pagePerformanceData">
+                <tr class="hover:bg-gray-50 dark:hover:bg-neutral-700/50">
+                  <td class="px-4 py-3 text-gray-900 text-sm whitespace-nowrap dark:text-white">{{ page.path }}</td>
+                  <td class="px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">{{ page.loadTime.toFixed(1) }}</td>
+                  <td class="px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">{{ page.fcp.toFixed(1) }}</td>
+                  <td class="px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">{{ page.lcp.toFixed(1) }}</td>
+                  <td class="px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">{{ page.cls.toFixed(2) }}</td>
+                  <td class="px-4 py-3 font-medium text-right text-sm whitespace-nowrap {{ getPerformanceColorClass(page.score) }}">{{ page.score }}</td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+      </div>
+</PageLayout>
+<script client>
+
+interface PageRow {
+  path: string
+  entries: number
+  visitors: number
+  views: number
+  percentage: number
+  avgTimeOnPage?: string
+  bounceRate?: string
+}
+
+interface PerformanceRow {
+  path: string
+  loadTime: number
+  fcp: number
+  lcp: number
+  cls: number
+  score: string
+}
+
+interface ChartLike { destroy: () => void }
+type ChartCtor = new (canvas: HTMLElement, config: { type: string, data: unknown, options?: unknown }) => ChartLike
+
+const dateRangeDisplay = state('All Time: Sep 7, 2023 to Mar 6, 2025')
+const comparisonType = state('no-comparison')
+
+const pagesData = state<PageRow[]>([
+  { path: '/', entries: 1800, visitors: 1800, views: 2100, percentage: 25, avgTimeOnPage: '02:15', bounceRate: '65%' },
+  { path: '/blog', entries: 613, visitors: 613, views: 739, percentage: 15, avgTimeOnPage: '03:45', bounceRate: '45%' },
+  { path: '/about', entries: 451, visitors: 451, views: 577, percentage: 12, avgTimeOnPage: '01:30', bounceRate: '70%' },
+  { path: '/contact', entries: 342, visitors: 342, views: 451, percentage: 9, avgTimeOnPage: '01:15', bounceRate: '75%' },
+  { path: '/products', entries: 337, visitors: 337, views: 460, percentage: 9, avgTimeOnPage: '04:20', bounceRate: '40%' },
+  { path: '/guide/get-started.html', entries: 221, visitors: 229, views: 345, percentage: 7, avgTimeOnPage: '05:45', bounceRate: '30%' },
+  { path: '/docs', entries: 216, visitors: 217, views: 302, percentage: 6, avgTimeOnPage: '06:30', bounceRate: '25%' },
+  { path: '/guide/intro.html', entries: 212, visitors: 217, views: 322, percentage: 6, avgTimeOnPage: '04:15', bounceRate: '35%' },
+  { path: '/guide/get-started', entries: 209, visitors: 212, views: 313, percentage: 6, avgTimeOnPage: '05:30', bounceRate: '32%' },
+  { path: '/team', entries: 109, visitors: 110, views: 215, percentage: 5, avgTimeOnPage: '02:45', bounceRate: '60%' },
+])
+
+const pagePerformanceData = state<PerformanceRow[]>([
+  { path: '/', loadTime: 0.8, fcp: 0.9, lcp: 1.2, cls: 0.05, score: 'Good' },
+  { path: '/blog', loadTime: 1.2, fcp: 1.3, lcp: 2.1, cls: 0.08, score: 'Good' },
+  { path: '/about', loadTime: 0.7, fcp: 0.8, lcp: 1.0, cls: 0.03, score: 'Good' },
+  { path: '/contact', loadTime: 0.9, fcp: 1.0, lcp: 1.5, cls: 0.04, score: 'Good' },
+  { path: '/products', loadTime: 1.5, fcp: 1.7, lcp: 2.5, cls: 0.1, score: 'Needs Improvement' },
+  { path: '/guide/get-started.html', loadTime: 1.8, fcp: 2.0, lcp: 2.8, cls: 0.12, score: 'Needs Improvement' },
+  { path: '/docs', loadTime: 2.2, fcp: 2.5, lcp: 3.5, cls: 0.15, score: 'Poor' },
+  { path: '/guide/intro.html', loadTime: 1.6, fcp: 1.8, lcp: 2.6, cls: 0.11, score: 'Needs Improvement' },
+  { path: '/guide/get-started', loadTime: 1.7, fcp: 1.9, lcp: 2.7, cls: 0.11, score: 'Needs Improvement' },
+  { path: '/team', loadTime: 0.8, fcp: 0.9, lcp: 1.3, cls: 0.06, score: 'Good' },
+])
+
+const pageViewsTrendData = state<Array<{ date: string, views: number, visitors: number }>>([
+  { date: '2023-09-01', views: 800, visitors: 600 },
+  { date: '2023-10-01', views: 850, visitors: 650 },
+  { date: '2023-11-01', views: 900, visitors: 700 },
+  { date: '2023-12-01', views: 1200, visitors: 900 },
+  { date: '2024-01-01', views: 1000, visitors: 800 },
+  { date: '2024-02-01', views: 1100, visitors: 850 },
+  { date: '2024-03-01', views: 1300, visitors: 950 },
+  { date: '2024-04-01', views: 1400, visitors: 1050 },
+  { date: '2024-05-01', views: 1500, visitors: 1150 },
+  { date: '2024-06-01', views: 1600, visitors: 1250 },
+  { date: '2024-07-01', views: 1800, visitors: 1400 },
+])
+
+let chartHandles: Array<{ destroy: () => void }> = []
+
+function getPerformanceColorClass(score: string): string {
+  switch (score) {
+    case 'Good': return 'text-green-600 dark:text-green-400'
+    case 'Needs Improvement': return 'text-yellow-600 dark:text-yellow-400'
+    case 'Poor': return 'text-red-600 dark:text-red-400'
+    default: return 'text-gray-600 dark:text-neutral-400'
+  }
+}
+
+onMount(async () => {
+  const { Chart, registerables } = await import('@stacksjs/charts')
+  Chart.register(...registerables)
+  const Ctor = Chart as unknown as ChartCtor
+
+  const trend = useChart({
+    Chart: Ctor,
+    id: 'pageViewsTrendChart',
+    type: 'line',
+    data: {
+      labels: pageViewsTrendData().map(item => item.date),
+      datasets: [
+        { label: 'Page Views', data: pageViewsTrendData().map(item => item.views), borderColor: 'rgba(59, 130, 246, 0.8)', backgroundColor: 'rgba(59, 130, 246, 0.1)', tension: 0.4, fill: true },
+        { label: 'Visitors', data: pageViewsTrendData().map(item => item.visitors), borderColor: 'rgba(16, 185, 129, 0.8)', backgroundColor: 'rgba(16, 185, 129, 0.1)', tension: 0.4, fill: false },
+      ],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: { x: { grid: { display: false } }, y: { beginAtZero: true, grid: { borderDash: [2, 4], color: 'rgba(160, 174, 192, 0.2)' }, ticks: { maxTicksLimit: 6 } } },
+      plugins: { legend: { position: 'top' }, tooltip: { mode: 'index', intersect: false } },
+    },
+  })
+
+  const top = pagesData().slice(0, 5)
+  const topPages = useChart({
+    Chart: Ctor,
+    id: 'topPagesChart',
+    type: 'bar',
+    data: {
+      labels: top.map(item => item.path),
+      datasets: [{
+        label: 'Page Views',
+        data: top.map(item => item.views),
+        backgroundColor: 'rgba(59, 130, 246, 0.8)',
+        borderColor: 'rgba(59, 130, 246, 1)',
+        borderWidth: 1,
+      }],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: { x: { grid: { display: false } }, y: { beginAtZero: true, grid: { borderDash: [2, 4], color: 'rgba(160, 174, 192, 0.2)' } } },
+      plugins: { legend: { display: false } },
+    },
+  })
+
+  chartHandles = [trend.instance, topPages.instance].filter((c): c is ChartLike => c !== null)
+})
+
+onDestroy(() => {
+  chartHandles.forEach(c => c.destroy())
+  chartHandles = []
+})
+</script>
+
+@endsection