analytics/resources/views/dashboard/show.blade.php

<x-analytics-layout :website="$website" :from="$from" :to="$to" title="Dashboard">
    <x-slot name="headerActions">
        <div
            x-data="realtimeWidget('{{ route('dashboard.realtime', $website) }}', {{ $activeVisitors }})"
            x-init="start()"
            class="hidden sm:flex items-center gap-2 rounded-full bg-emerald-50 px-3 py-1.5 text-sm ring-1 ring-emerald-200"
        >
            <span class="relative flex h-2 w-2">
                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
            </span>
            <span class="font-medium text-emerald-800"><span x-text="count"></span> online</span>
        </div>
    </x-slot>

    <div class="space-y-6">
        {{-- Metric cards --}}
        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
            <x-metric-card label="Page Views" :value="$metrics['page_views']" :previousValue="$prevMetrics['page_views']" />
            <x-metric-card label="Unique Visitors" :value="$metrics['visitors']" :previousValue="$prevMetrics['visitors']" />
            <x-metric-card label="Sessions" :value="$metrics['sessions']" :previousValue="$prevMetrics['sessions']" />
            <x-metric-card label="Bounce Rate" :value="$metrics['bounce_rate']" :previousValue="$prevMetrics['bounce_rate']" format="percent" />
            <x-metric-card label="Avg. Duration" :value="$metrics['avg_duration']" :previousValue="$prevMetrics['avg_duration']" format="duration" />
            <x-metric-card label="Pages / Session" :value="$metrics['avg_pages']" :previousValue="$prevMetrics['avg_pages']" />
        </div>

        {{-- Visitors chart --}}
        <div class="bg-white rounded-xl border border-gray-200 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>
            @if (collect($chartData)->sum('page_views') > 0)
                <div style="height: 300px;"><canvas id="visitors-chart"></canvas></div>
            @else
                <x-empty-state message="No traffic data for this period." compact />
            @endif
        </div>

        {{-- Two-column: Top Pages + Top Sources --}}
        <div class="grid gap-6 lg:grid-cols-2">
            {{-- Top pages --}}
            <div class="bg-white rounded-xl border border-gray-200 p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-base font-semibold text-gray-900">Top Pages</h3>
                    <a href="{{ route('reports.pages', [$website] + request()->only(['range', 'from', 'to'])) }}" class="text-sm text-indigo-600 hover:text-indigo-800">View all</a>
                </div>
                @if ($topPages->isEmpty())
                    <x-empty-state message="No page data yet." compact />
                @else
                    <div class="space-y-3">
                        @php $maxViews = $topPages->max('views') ?: 1; @endphp
                        @foreach ($topPages as $page)
                            <div>
                                <div class="flex justify-between text-sm mb-1">
                                    <span class="text-gray-700 truncate font-mono text-xs" title="{{ $page->path }}">{{ Str::limit($page->path, 50) }}</span>
                                    <span class="text-gray-500 tabular-nums ml-2 shrink-0">{{ number_format($page->views) }}</span>
                                </div>
                                <div class="w-full bg-gray-100 rounded-full h-1.5">
                                    <div class="bg-indigo-500 h-1.5 rounded-full transition-all" style="width: {{ ($page->views / $maxViews) * 100 }}%"></div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>

            {{-- Top sources --}}
            <div class="bg-white rounded-xl border border-gray-200 p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-base font-semibold text-gray-900">Traffic Sources</h3>
                    <a href="{{ route('reports.sources', [$website] + request()->only(['range', 'from', 'to'])) }}" class="text-sm text-indigo-600 hover:text-indigo-800">View all</a>
                </div>
                @if ($topSources->isEmpty())
                    <x-empty-state message="No traffic source data yet." compact />
                @else
                    <div class="flex gap-6">
                        <div class="w-40 h-40 shrink-0"><canvas id="sources-donut"></canvas></div>
                        <div class="flex-1 space-y-2 min-w-0">
                            @php $maxSess = $topSources->max('sessions') ?: 1; @endphp
                            @foreach ($topSources as $src)
                                <div class="flex justify-between text-sm">
                                    <span class="text-gray-700 truncate">{{ $src->source }}</span>
                                    <span class="text-gray-500 tabular-nums ml-2 shrink-0">{{ number_format($src->sessions) }}</span>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
        </div>

        {{-- Goal completions --}}
        @if ($goalConversions->isNotEmpty())
            <div class="bg-white rounded-xl border border-gray-200 p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-base font-semibold text-gray-900">Goal Completions</h3>
                    <div class="flex items-center gap-3">
                        <a href="{{ route('reports.conversions', [$website] + request()->only(['range', 'from', 'to'])) }}" class="text-sm text-indigo-600 hover:text-indigo-800">View report</a>
                        <a href="{{ route('goals.index', $website) }}" class="text-sm text-gray-500 hover:text-gray-700">Manage</a>
                    </div>
                </div>
                <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach ($goalConversions->where('is_active', true)->take(6) as $goal)
                        <div class="rounded-lg border border-gray-200 p-4">
                            <div class="flex items-center justify-between mb-1">
                                <span class="text-sm font-medium text-gray-900 truncate">{{ $goal->name }}</span>
                                <span class="text-xs text-gray-500">{{ $goal->conversion_rate }}%</span>
                            </div>
                            <div class="text-2xl font-bold text-gray-900">{{ number_format($goal->completions) }}</div>
                            @if ($goal->total_value)
                                <div class="text-xs text-gray-500 mt-0.5">${{ number_format($goal->total_value, 2) }} value</div>
                            @endif
                            <div class="mt-2 w-full bg-gray-100 rounded-full h-1.5">
                                <div class="bg-emerald-500 h-1.5 rounded-full" style="width: {{ min($goal->conversion_rate, 100) }}%"></div>
                            </div>
                        </div>
                    @endforeach
                </div>
                @if ($goalChartData->sum('completions') > 0)
                    <div class="mt-4" style="height: 100px;"><canvas id="goal-sparkline"></canvas></div>
                @endif
            </div>
        @endif
    </div>

    @push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
    <script>
        const chartDefaults = {
            font: { family: 'Inter, system-ui, sans-serif' },
            color: '#9ca3af',
        };

        Chart.defaults.font = chartDefaults.font;

        document.addEventListener('DOMContentLoaded', function () {
            const raw = @json($chartData);
            if (raw.some(d => d.page_views > 0)) {
                new Chart(document.getElementById('visitors-chart'), {
                    type: 'line',
                    data: {
                        labels: raw.map(d => d.period),
                        datasets: [
                            { label: 'Visitors', data: raw.map(d => d.visitors), borderColor: '#6366f1', backgroundColor: 'rgba(99,102,241,0.06)', fill: true, tension: 0.35, pointRadius: raw.length > 60 ? 0 : 3, borderWidth: 2 },
                            { label: 'Page Views', data: raw.map(d => d.page_views), borderColor: '#10b981', backgroundColor: 'rgba(16,185,129,0.04)', fill: true, tension: 0.35, pointRadius: raw.length > 60 ? 0 : 3, borderWidth: 2 },
                            { label: 'Sessions', data: raw.map(d => d.sessions), borderColor: '#f59e0b', backgroundColor: 'rgba(245,158,11,0.04)', fill: true, tension: 0.35, pointRadius: raw.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.95)', 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 } },
                        },
                    },
                });
            }

            // Sources donut
            const sourcesCanvas = document.getElementById('sources-donut');
            if (sourcesCanvas) {
                const srcData = @json($topSources);
                const colors = ['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#14b8a6'];
                new Chart(sourcesCanvas, {
                    type: 'doughnut',
                    data: {
                        labels: srcData.map(s => s.source),
                        datasets: [{ data: srcData.map(s => s.sessions), backgroundColor: colors.slice(0, srcData.length), borderWidth: 0, spacing: 2 }],
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: true,
                        cutout: '65%',
                        plugins: { legend: { display: false }, tooltip: { backgroundColor: 'rgba(17,24,39,0.95)', padding: 10, cornerRadius: 8 } },
                    },
                });
            }

            // Goal sparkline
            const goalCanvas = document.getElementById('goal-sparkline');
            if (goalCanvas) {
                const goalRaw = @json($goalChartData);
                new Chart(goalCanvas, {
                    type: 'line',
                    data: {
                        labels: goalRaw.map(d => d.period),
                        datasets: [{ data: goalRaw.map(d => d.completions), borderColor: '#10b981', backgroundColor: 'rgba(16,185,129,0.08)', fill: true, tension: 0.35, pointRadius: 0, borderWidth: 2 }],
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: { legend: { display: false }, tooltip: { enabled: false } },
                        scales: { x: { display: false }, y: { display: false, beginAtZero: true } },
                    },
                });
            }
        });

        function realtimeWidget(url, initial) {
            return {
                count: initial,
                start() {
                    setInterval(() => {
                        fetch(url).then(r => r.json()).then(d => { this.count = d.active; }).catch(() => {});
                    }, 30000);
                },
            };
        }
    </script>
    @endpush
</x-analytics-layout>