phase 2

2026-03-18 12:18:07 +02:00
parent a4383337f4
commit 6ad100d331
12 changed files with 513 additions and 77 deletions
@@ -0,0 +1,75 @@
+@props(['website', 'from', 'to'])
+
+@php
+    $currentRange = request('range', '7d');
+    $presets = [
+        'today' => 'Today',
+        '7d' => 'Last 7 days',
+        '30d' => 'Last 30 days',
+        '90d' => 'Last 90 days',
+    ];
+@endphp
+
+<div x-data="{ open: false, mode: '{{ $currentRange }}' }" class="relative">
+    <button
+        @click="open = !open"
+        type="button"
+        class="inline-flex items-center gap-2 rounded-md bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+    >
+        <svg class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" />
+        </svg>
+        <span>{{ $presets[$currentRange] ?? $from->format('M j') . ' - ' . $to->format('M j, Y') }}</span>
+        <svg class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 20 20">
+            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" fill="currentColor" />
+        </svg>
+    </button>
+
+    <div
+        x-show="open"
+        @click.away="open = false"
+        x-transition
+        class="absolute right-0 z-10 mt-2 w-72 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5"
+    >
+        <div class="p-2">
+            @foreach ($presets as $key => $label)
+                <a
+                    href="{{ route('dashboard.show', ['website' => $website, 'range' => $key]) }}"
+                    class="block rounded-md px-3 py-2 text-sm {{ $currentRange === $key ? 'bg-indigo-50 text-indigo-700 font-medium' : 'text-gray-700 hover:bg-gray-100' }}"
+                >
+                    {{ $label }}
+                </a>
+            @endforeach
+
+            <div class="my-2 border-t border-gray-100"></div>
+
+            <form action="{{ route('dashboard.show', $website) }}" method="GET" class="px-3 py-2 space-y-3">
+                <input type="hidden" name="range" value="custom">
+                <div>
+                    <label class="block text-xs font-medium text-gray-500 mb-1">From</label>
+                    <input
+                        type="date"
+                        name="from"
+                        value="{{ $from->toDateString() }}"
+                        class="block w-full rounded-md border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+                    >
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-gray-500 mb-1">To</label>
+                    <input
+                        type="date"
+                        name="to"
+                        value="{{ $to->toDateString() }}"
+                        class="block w-full rounded-md border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+                    >
+                </div>
+                <button
+                    type="submit"
+                    class="w-full rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-indigo-500"
+                >
+                    Apply
+                </button>
+            </form>
+        </div>
+    </div>
+</div>
@@ -0,0 +1,197 @@
+<x-app-layout>
+    <x-slot name="header">
+        <div class="flex items-center justify-between flex-wrap gap-4">
+            <div class="flex items-center gap-3">
+                <a href="{{ route('websites.index') }}" class="text-gray-400 hover:text-gray-600">
+                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
+                    </svg>
+                </a>
+                <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+                    {{ $website->name }}
+                </h2>
+                <span class="text-sm text-gray-400">{{ $website->domain }}</span>
+            </div>
+
+            <div class="flex items-center gap-4">
+                {{-- Real-time indicator --}}
+                <div
+                    x-data="realtimeWidget('{{ route('dashboard.realtime', $website) }}')"
+                    x-init="start()"
+                    class="flex items-center gap-2 rounded-md bg-green-50 px-3 py-1.5 text-sm"
+                >
+                    <span class="relative flex h-2.5 w-2.5">
+                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+                        <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-500"></span>
+                    </span>
+                    <span class="font-medium text-green-800">
+                        <span x-text="count"></span> active now
+                    </span>
+                </div>
+
+                <x-date-range-picker :website="$website" :from="$from" :to="$to" />
+
+                <div class="flex items-center gap-2">
+                    <a href="{{ route('websites.snippet', $website) }}" class="text-sm text-gray-500 hover:text-gray-700">Snippet</a>
+                    <a href="{{ route('websites.edit', $website) }}" class="text-sm text-gray-500 hover:text-gray-700">Settings</a>
+                </div>
+            </div>
+        </div>
+    </x-slot>
+
+    <div class="py-8">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
+
+            {{-- Metric Cards --}}
+            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
+                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-5">
+                    <dt class="text-sm font-medium text-gray-500 truncate">Page Views</dt>
+                    <dd class="mt-1 text-2xl font-bold text-gray-900">{{ number_format($metrics['page_views']) }}</dd>
+                </div>
+                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-5">
+                    <dt class="text-sm font-medium text-gray-500 truncate">Unique Visitors</dt>
+                    <dd class="mt-1 text-2xl font-bold text-gray-900">{{ number_format($metrics['visitors']) }}</dd>
+                </div>
+                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-5">
+                    <dt class="text-sm font-medium text-gray-500 truncate">Sessions</dt>
+                    <dd class="mt-1 text-2xl font-bold text-gray-900">{{ number_format($metrics['sessions']) }}</dd>
+                </div>
+                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-5">
+                    <dt class="text-sm font-medium text-gray-500 truncate">Bounce Rate</dt>
+                    <dd class="mt-1 text-2xl font-bold text-gray-900">{{ $metrics['bounce_rate'] }}%</dd>
+                </div>
+                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-5">
+                    <dt class="text-sm font-medium text-gray-500 truncate">Avg. Duration</dt>
+                    <dd class="mt-1 text-2xl font-bold text-gray-900">{{ gmdate('i:s', (int) $metrics['avg_duration']) }}</dd>
+                </div>
+                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-5">
+                    <dt class="text-sm font-medium text-gray-500 truncate">Pages / Session</dt>
+                    <dd class="mt-1 text-2xl font-bold text-gray-900">{{ $metrics['avg_pages'] }}</dd>
+                </div>
+            </div>
+
+            {{-- Visitors Chart --}}
+            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
+                <div class="flex items-center justify-between mb-4">
+                    <h3 class="text-base font-semibold text-gray-900">Visitors & Page Views</h3>
+                    <div class="flex items-center gap-4 text-xs text-gray-500">
+                        <span class="flex items-center gap-1.5">
+                            <span class="inline-block w-3 h-0.5 rounded bg-indigo-500"></span> Visitors
+                        </span>
+                        <span class="flex items-center gap-1.5">
+                            <span class="inline-block w-3 h-0.5 rounded bg-emerald-500"></span> Page Views
+                        </span>
+                        <span class="flex items-center gap-1.5">
+                            <span class="inline-block w-3 h-0.5 rounded bg-amber-400"></span> Sessions
+                        </span>
+                    </div>
+                </div>
+
+                <div style="height: 320px;">
+                    <canvas id="visitors-chart"></canvas>
+                </div>
+            </div>
+
+        </div>
+    </div>
+
+    @push('scripts')
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const raw = @json($chartData);
+            const labels = raw.map(d => d.period);
+            const visitors = raw.map(d => d.visitors);
+            const pageViews = raw.map(d => d.page_views);
+            const sessions = raw.map(d => d.sessions);
+
+            new Chart(document.getElementById('visitors-chart'), {
+                type: 'line',
+                data: {
+                    labels: labels,
+                    datasets: [
+                        {
+                            label: 'Visitors',
+                            data: visitors,
+                            borderColor: 'rgb(99, 102, 241)',
+                            backgroundColor: 'rgba(99, 102, 241, 0.08)',
+                            fill: true,
+                            tension: 0.3,
+                            pointRadius: labels.length > 60 ? 0 : 3,
+                            borderWidth: 2,
+                        },
+                        {
+                            label: 'Page Views',
+                            data: pageViews,
+                            borderColor: 'rgb(16, 185, 129)',
+                            backgroundColor: 'rgba(16, 185, 129, 0.05)',
+                            fill: true,
+                            tension: 0.3,
+                            pointRadius: labels.length > 60 ? 0 : 3,
+                            borderWidth: 2,
+                        },
+                        {
+                            label: 'Sessions',
+                            data: sessions,
+                            borderColor: 'rgb(251, 191, 36)',
+                            backgroundColor: 'rgba(251, 191, 36, 0.05)',
+                            fill: true,
+                            tension: 0.3,
+                            pointRadius: labels.length > 60 ? 0 : 3,
+                            borderWidth: 2,
+                        },
+                    ],
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    interaction: { intersect: false, mode: 'index' },
+                    plugins: {
+                        legend: { display: false },
+                        tooltip: {
+                            backgroundColor: 'rgba(17, 24, 39, 0.9)',
+                            padding: 12,
+                            cornerRadius: 8,
+                            titleFont: { size: 13 },
+                            bodyFont: { size: 12 },
+                        },
+                    },
+                    scales: {
+                        x: {
+                            grid: { display: false },
+                            ticks: {
+                                maxTicksLimit: 12,
+                                font: { size: 11 },
+                                color: '#9ca3af',
+                            },
+                        },
+                        y: {
+                            beginAtZero: true,
+                            grid: { color: 'rgba(0,0,0,0.04)' },
+                            ticks: {
+                                font: { size: 11 },
+                                color: '#9ca3af',
+                                precision: 0,
+                            },
+                        },
+                    },
+                },
+            });
+        });
+
+        function realtimeWidget(url) {
+            return {
+                count: {{ $activeVisitors }},
+                start() {
+                    setInterval(() => {
+                        fetch(url)
+                            .then(r => r.json())
+                            .then(d => { this.count = d.active; })
+                            .catch(() => {});
+                    }, 30000);
+                },
+            };
+        }
+    </script>
+    @endpush
+</x-app-layout>
@@ -32,5 +32,6 @@
                {{ $slot }}
            </main>
        </div>
+        @stack('scripts')
    </body>
 </html>
@@ -35,7 +35,7 @@

                        <div class="flex items-center gap-4">
                            <x-primary-button>{{ __('Save Changes') }}</x-primary-button>
-                            <a href="{{ route('websites.show', $website) }}" class="text-sm text-gray-600 hover:text-gray-900">{{ __('Cancel') }}</a>
+                            <a href="{{ route('dashboard.show', $website) }}" class="text-sm text-gray-600 hover:text-gray-900">{{ __('Cancel') }}</a>
                        </div>
                    </form>
                </div>
@@ -40,7 +40,7 @@
                            <div class="p-6">
                                <div class="flex items-center justify-between mb-4">
                                    <h3 class="text-lg font-semibold text-gray-900 truncate">
-                                        <a href="{{ route('websites.show', $website) }}" class="hover:text-indigo-600">
+                                        <a href="{{ route('dashboard.show', $website) }}" class="hover:text-indigo-600">
                                            {{ $website->name }}
                                        </a>
                                    </h3>
@@ -53,7 +53,7 @@
                                <p class="text-xs text-gray-400 font-mono">{{ $website->tracking_id }}</p>

                                <div class="mt-4 flex items-center gap-3 text-sm">
-                                    <a href="{{ route('websites.show', $website) }}" class="text-indigo-600 hover:text-indigo-800">View</a>
+                                    <a href="{{ route('dashboard.show', $website) }}" class="text-indigo-600 hover:text-indigo-800">Dashboard</a>
                                    <a href="{{ route('websites.snippet', $website) }}" class="text-indigo-600 hover:text-indigo-800">Snippet</a>
                                    <a href="{{ route('websites.edit', $website) }}" class="text-gray-600 hover:text-gray-800">Edit</a>
                                </div>
@@ -1,63 +0,0 @@
-<x-app-layout>
-    <x-slot name="header">
-        <div class="flex items-center justify-between">
-            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
-                {{ $website->name }}
-            </h2>
-            <div class="flex items-center gap-3">
-                <a href="{{ route('websites.snippet', $website) }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
-                    {{ __('Get Snippet') }}
-                </a>
-                <a href="{{ route('websites.edit', $website) }}" class="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
-                    {{ __('Settings') }}
-                </a>
-            </div>
-        </div>
-    </x-slot>
-
-    <div class="py-12">
-        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-            @if (session('success'))
-                <div class="mb-4 rounded-md bg-green-50 p-4">
-                    <p class="text-sm font-medium text-green-800">{{ session('success') }}</p>
-                </div>
-            @endif
-
-            <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-4 mb-8">
-                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
-                    <dt class="text-sm font-medium text-gray-500 truncate">{{ __('Domain') }}</dt>
-                    <dd class="mt-1 text-lg font-semibold text-gray-900">{{ $website->domain }}</dd>
-                </div>
-                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
-                    <dt class="text-sm font-medium text-gray-500 truncate">{{ __('Tracking ID') }}</dt>
-                    <dd class="mt-1 text-lg font-semibold text-gray-900 font-mono">{{ $website->tracking_id }}</dd>
-                </div>
-                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
-                    <dt class="text-sm font-medium text-gray-500 truncate">{{ __('Status') }}</dt>
-                    <dd class="mt-1">
-                        <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-sm font-medium {{ $website->is_active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
-                            {{ $website->is_active ? 'Active' : 'Inactive' }}
-                        </span>
-                    </dd>
-                </div>
-                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
-                    <dt class="text-sm font-medium text-gray-500 truncate">{{ __('Created') }}</dt>
-                    <dd class="mt-1 text-lg font-semibold text-gray-900">{{ $website->created_at->format('M j, Y') }}</dd>
-                </div>
-            </div>
-
-            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
-                <div class="p-6 text-center text-gray-500">
-                    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />
-                    </svg>
-                    <p class="mt-2">{{ __('Analytics dashboard will be available here once data is collected.') }}</p>
-                    <p class="mt-1 text-sm">{{ __('Make sure you have added the tracking snippet to your website.') }}</p>
-                    <a href="{{ route('websites.snippet', $website) }}" class="mt-4 inline-flex items-center text-sm text-indigo-600 hover:text-indigo-800">
-                        {{ __('View tracking snippet') }} &rarr;
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-</x-app-layout>
@@ -4,8 +4,8 @@
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ __('Tracking Snippet') }}: {{ $website->name }}
            </h2>
-            <a href="{{ route('websites.show', $website) }}" class="text-sm text-gray-600 hover:text-gray-900">
-                &larr; {{ __('Back to website') }}
+            <a href="{{ route('dashboard.show', $website) }}" class="text-sm text-gray-600 hover:text-gray-900">
+                &larr; {{ __('Back to dashboard') }}
            </a>
        </div>
    </x-slot>