phase 2

PLAN.md

@@ -24,18 +24,18 @@ The platform needs user accounts and CRUD for tracked websites before anything e
 
 The main dashboard a user sees after selecting a website, showing key metrics at a glance.
 
-- [ ] Create `DashboardController` scoped to a single website
-- [ ] Build a date-range picker component (today, last 7 days, last 30 days, custom range)
-- [ ] **Metric cards** — display for the selected period:
+- [x] Create `DashboardController` scoped to a single website
+- [x] Build a date-range picker component (today, last 7 days, last 30 days, custom range)
+- [x] **Metric cards** — display for the selected period:
   - Total page views
   - Unique visitors
   - Total sessions
   - Bounce rate (% of sessions with 1 page view)
   - Average session duration
   - Average pages per session
-- [ ] **Visitors chart** — line/area chart of visitors and page views over time (daily or hourly granularity)
-- [ ] **Real-time widget** — show active visitors in the last 5 minutes (poll or WebSocket)
-- [ ] Create an `AnalyticsQueryService` (or similar) to encapsulate all aggregation queries, keeping controllers thin
+- [x] **Visitors chart** — line/area chart of visitors and page views over time (daily or hourly granularity)
+- [x] **Real-time widget** — show active visitors in the last 5 minutes (poll or WebSocket)
+- [x] Create an `AnalyticsQueryService` (or similar) to encapsulate all aggregation queries, keeping controllers thin
 
 ---
 

app/Http/Controllers/DashboardController.php

@@ -0,0 +1,64 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Website;
+use App\Services\AnalyticsQueryService;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+use Illuminate\Support\Carbon;
+use Illuminate\View\View;
+
+class DashboardController extends Controller
+{
+    public function show(Request $request, Website $website): View
+    {
+        $this->authorize('view', $website);
+
+        [$from, $to] = $this->parseDateRange($request);
+
+        $service = AnalyticsQueryService::for($website, $from, $to);
+        $metrics = $service->summary();
+        $chartData = $service->visitorsOverTime();
+        $activeVisitors = AnalyticsQueryService::activeVisitors($website);
+
+        return view('dashboard.show', compact(
+            'website', 'metrics', 'chartData', 'activeVisitors', 'from', 'to',
+        ));
+    }
+
+    public function realtime(Website $website): JsonResponse
+    {
+        $this->authorize('view', $website);
+
+        return response()->json([
+            'active' => AnalyticsQueryService::activeVisitors($website),
+        ]);
+    }
+
+    private function parseDateRange(Request $request): array
+    {
+        $range = $request->get('range', '7d');
+
+        $to = Carbon::today();
+
+        $from = match ($range) {
+            'today' => Carbon::today(),
+            '7d' => Carbon::today()->subDays(6),
+            '30d' => Carbon::today()->subDays(29),
+            '90d' => Carbon::today()->subDays(89),
+            'custom' => Carbon::parse($request->get('from', Carbon::today()->subDays(6)->toDateString())),
+            default => Carbon::today()->subDays(6),
+        };
+
+        if ($range === 'custom' && $request->has('to')) {
+            $to = Carbon::parse($request->get('to'));
+        }
+
+        if ($from->gt($to)) {
+            [$from, $to] = [$to, $from];
+        }
+
+        return [$from, $to];
+    }
+}

app/Http/Controllers/WebsiteController.php

@@ -31,11 +31,11 @@ class WebsiteController extends Controller
             ->with('success', 'Website added successfully.');
     }
 
-    public function show(Website $website): View
+    public function show(Website $website): RedirectResponse
     {
         $this->authorize('view', $website);
 
-        return view('websites.show', compact('website'));
+        return redirect()->route('dashboard.show', $website);
     }
 
     public function edit(Website $website): View
@@ -54,7 +54,7 @@ class WebsiteController extends Controller
         $website->update($data);
 
         return redirect()
-            ->route('websites.show', $website)
+            ->route('dashboard.show', $website)
             ->with('success', 'Website updated successfully.');
     }
 

app/Services/AnalyticsQueryService.php

@@ -0,0 +1,158 @@
+<?php
+
+namespace App\Services;
+
+use App\Models\AnalyticsSession;
+use App\Models\PageView;
+use App\Models\Visitor;
+use App\Models\Website;
+use Illuminate\Support\Carbon;
+use Illuminate\Support\Collection;
+use Illuminate\Support\Facades\DB;
+
+class AnalyticsQueryService
+{
+    public function __construct(
+        private readonly Website $website,
+        private readonly Carbon $from,
+        private readonly Carbon $to,
+    ) {}
+
+    public static function for(Website $website, Carbon $from, Carbon $to): self
+    {
+        return new self($website, $from->startOfDay(), $to->endOfDay());
+    }
+
+    // ---- Summary Metrics ----
+
+    public function totalPageViews(): int
+    {
+        return PageView::where('website_id', $this->website->id)
+            ->whereBetween('viewed_at', [$this->from, $this->to])
+            ->count();
+    }
+
+    public function uniqueVisitors(): int
+    {
+        return PageView::where('website_id', $this->website->id)
+            ->whereBetween('viewed_at', [$this->from, $this->to])
+            ->distinct('visitor_id')
+            ->count('visitor_id');
+    }
+
+    public function totalSessions(): int
+    {
+        return AnalyticsSession::where('website_id', $this->website->id)
+            ->whereBetween('started_at', [$this->from, $this->to])
+            ->count();
+    }
+
+    public function bounceRate(): float
+    {
+        $total = $this->totalSessions();
+        if ($total === 0) {
+            return 0;
+        }
+
+        $bounced = AnalyticsSession::where('website_id', $this->website->id)
+            ->whereBetween('started_at', [$this->from, $this->to])
+            ->where('is_bounce', true)
+            ->count();
+
+        return round(($bounced / $total) * 100, 1);
+    }
+
+    public function avgSessionDuration(): float
+    {
+        return round(
+            (float) AnalyticsSession::where('website_id', $this->website->id)
+                ->whereBetween('started_at', [$this->from, $this->to])
+                ->avg('duration') ?? 0,
+        );
+    }
+
+    public function avgPagesPerSession(): float
+    {
+        return round(
+            (float) AnalyticsSession::where('website_id', $this->website->id)
+                ->whereBetween('started_at', [$this->from, $this->to])
+                ->avg('pages_count') ?? 0,
+            1,
+        );
+    }
+
+    public function summary(): array
+    {
+        return [
+            'page_views' => $this->totalPageViews(),
+            'visitors' => $this->uniqueVisitors(),
+            'sessions' => $this->totalSessions(),
+            'bounce_rate' => $this->bounceRate(),
+            'avg_duration' => $this->avgSessionDuration(),
+            'avg_pages' => $this->avgPagesPerSession(),
+        ];
+    }
+
+    // ---- Time Series ----
+
+    public function visitorsOverTime(): Collection
+    {
+        $days = $this->from->diffInDays($this->to);
+        $groupFormat = $days <= 2 ? '%Y-%m-%d %H:00' : '%Y-%m-%d';
+        $carbonFormat = $days <= 2 ? 'Y-m-d H:00' : 'Y-m-d';
+
+        $pageViews = PageView::where('website_id', $this->website->id)
+            ->whereBetween('viewed_at', [$this->from, $this->to])
+            ->select(
+                DB::raw("strftime('{$groupFormat}', viewed_at) as period"),
+                DB::raw('COUNT(*) as page_views'),
+                DB::raw('COUNT(DISTINCT visitor_id) as visitors'),
+            )
+            ->groupBy('period')
+            ->orderBy('period')
+            ->get()
+            ->keyBy('period');
+
+        $sessions = AnalyticsSession::where('website_id', $this->website->id)
+            ->whereBetween('started_at', [$this->from, $this->to])
+            ->select(
+                DB::raw("strftime('{$groupFormat}', started_at) as period"),
+                DB::raw('COUNT(*) as sessions'),
+            )
+            ->groupBy('period')
+            ->orderBy('period')
+            ->get()
+            ->keyBy('period');
+
+        $periods = collect();
+        $cursor = $this->from->copy();
+        $increment = $days <= 2 ? 'addHour' : 'addDay';
+
+        while ($cursor->lte($this->to)) {
+            $key = $cursor->format($carbonFormat);
+            $pv = $pageViews->get($key);
+            $sess = $sessions->get($key);
+
+            $periods->push([
+                'period' => $key,
+                'page_views' => $pv ? $pv->page_views : 0,
+                'visitors' => $pv ? $pv->visitors : 0,
+                'sessions' => $sess ? $sess->sessions : 0,
+            ]);
+
+            $cursor->$increment();
+        }
+
+        return $periods;
+    }
+
+    // ---- Real-Time ----
+
+    public static function activeVisitors(Website $website, int $minutes = 5): int
+    {
+        return AnalyticsSession::where('website_id', $website->id)
+            ->where('ended_at', '>=', Carbon::now()->subMinutes($minutes))
+            ->distinct('visitor_id')
+            ->count('visitor_id');
+    }
+}

resources/views/components/date-range-picker.blade.php

@@ -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>

resources/views/dashboard/show.blade.php

@@ -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>

resources/views/layouts/app.blade.php

@@ -32,5 +32,6 @@
                 {{ $slot }}
             </main>
         </div>
+        @stack('scripts')
     </body>
 </html>

resources/views/websites/edit.blade.php

@@ -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>

resources/views/websites/index.blade.php

@@ -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>

resources/views/websites/show.blade.php

@@ -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>

resources/views/websites/snippet.blade.php

@@ -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>

routes/web.php

@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Controllers\DashboardController;
 use App\Http\Controllers\ProfileController;
 use App\Http\Controllers\WebsiteController;
 use Illuminate\Support\Facades\Route;
@@ -15,6 +16,9 @@ Route::get('/dashboard', function () {
 Route::middleware(['auth', 'verified'])->group(function () {
     Route::resource('websites', WebsiteController::class);
     Route::get('websites/{website}/snippet', [WebsiteController::class, 'snippet'])->name('websites.snippet');
+
+    Route::get('websites/{website}/dashboard', [DashboardController::class, 'show'])->name('dashboard.show');
+    Route::get('websites/{website}/realtime', [DashboardController::class, 'realtime'])->name('dashboard.realtime');
 });
 
 Route::middleware('auth')->group(function () {