phase 3
This commit is contained in:
@@ -2,6 +2,8 @@
|
||||
|
||||
@php
|
||||
$currentRange = request('range', '7d');
|
||||
$currentRouteName = request()->route()->getName();
|
||||
$currentRouteParams = request()->route()->parameters();
|
||||
$presets = [
|
||||
'today' => 'Today',
|
||||
'7d' => 'Last 7 days',
|
||||
@@ -34,7 +36,7 @@
|
||||
<div class="p-2">
|
||||
@foreach ($presets as $key => $label)
|
||||
<a
|
||||
href="{{ route('dashboard.show', ['website' => $website, 'range' => $key]) }}"
|
||||
href="{{ route($currentRouteName, $currentRouteParams + ['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 }}
|
||||
@@ -43,7 +45,7 @@
|
||||
|
||||
<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">
|
||||
<form action="{{ route($currentRouteName, $currentRouteParams) }}" 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>
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
@props(['website', 'from', 'to', 'title'])
|
||||
|
||||
<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('dashboard.show', $website) }}" 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">{{ $title }}</h2>
|
||||
<span class="text-sm text-gray-400">{{ $website->domain }}</span>
|
||||
</div>
|
||||
<x-date-range-picker :website="$website" :from="$from" :to="$to" />
|
||||
</div>
|
||||
</x-slot>
|
||||
|
||||
<div class="py-8">
|
||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="flex gap-6">
|
||||
{{-- Sidebar --}}
|
||||
<nav class="hidden lg:block w-56 shrink-0">
|
||||
<div class="bg-white shadow-sm sm:rounded-lg p-4 sticky top-8 space-y-6">
|
||||
@php
|
||||
$q = request()->only(['range', 'from', 'to']);
|
||||
$active = fn(string $route) => request()->routeIs($route) ? 'bg-indigo-50 text-indigo-700 font-medium' : 'text-gray-600 hover:bg-gray-50';
|
||||
@endphp
|
||||
|
||||
<div>
|
||||
<h4 class="px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Audience</h4>
|
||||
<a href="{{ route('reports.geographic', [$website] + $q) }}" class="block rounded-md px-3 py-1.5 text-sm {{ $active('reports.geographic') }}">Geographic</a>
|
||||
<a href="{{ route('reports.technology', [$website] + $q) }}" class="block rounded-md px-3 py-1.5 text-sm {{ $active('reports.technology') }}">Technology</a>
|
||||
<a href="{{ route('reports.language', [$website] + $q) }}" class="block rounded-md px-3 py-1.5 text-sm {{ $active('reports.language') }}">Language</a>
|
||||
<a href="{{ route('reports.new-vs-returning', [$website] + $q) }}" class="block rounded-md px-3 py-1.5 text-sm {{ $active('reports.new-vs-returning') }}">New vs Returning</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Acquisition</h4>
|
||||
<a href="{{ route('reports.sources', [$website] + $q) }}" class="block rounded-md px-3 py-1.5 text-sm {{ $active('reports.sources') }}">Traffic Sources</a>
|
||||
<a href="{{ route('reports.campaigns', [$website] + $q) }}" class="block rounded-md px-3 py-1.5 text-sm {{ $active('reports.campaigns') }}">Campaigns</a>
|
||||
<a href="{{ route('reports.referrers', [$website] + $q) }}" class="block rounded-md px-3 py-1.5 text-sm {{ $active('reports.referrers') }}">Referrers</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Behavior</h4>
|
||||
<a href="{{ route('reports.pages', [$website] + $q) }}" class="block rounded-md px-3 py-1.5 text-sm {{ $active('reports.pages') }}">Pages</a>
|
||||
<a href="{{ route('reports.landing-pages', [$website] + $q) }}" class="block rounded-md px-3 py-1.5 text-sm {{ $active('reports.landing-pages') }}">Landing Pages</a>
|
||||
<a href="{{ route('reports.exit-pages', [$website] + $q) }}" class="block rounded-md px-3 py-1.5 text-sm {{ $active('reports.exit-pages') }}">Exit Pages</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Events</h4>
|
||||
<a href="{{ route('reports.events', [$website] + $q) }}" class="block rounded-md px-3 py-1.5 text-sm {{ $active('reports.events') }}">Overview</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{{-- Main Content --}}
|
||||
<div class="flex-1 min-w-0">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@isset($scripts)
|
||||
@push('scripts')
|
||||
{{ $scripts }}
|
||||
@endpush
|
||||
@endisset
|
||||
</x-app-layout>
|
||||
@@ -0,0 +1,24 @@
|
||||
@props(['headers', 'empty' => 'No data available for this period.'])
|
||||
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
@foreach ($headers as $header)
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider {{ $loop->first ? '' : 'text-right' }}">
|
||||
{{ $header }}
|
||||
</th>
|
||||
@endforeach
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
{{ $slot }}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@if (trim((string) $slot) === '')
|
||||
<div class="px-6 py-12 text-center text-sm text-gray-500">{{ $empty }}</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@@ -92,6 +92,45 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Quick Report Links --}}
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-4">Reports</h3>
|
||||
@php $q = request()->only(['range', 'from', 'to']); @endphp
|
||||
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div>
|
||||
<h4 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Audience</h4>
|
||||
<div class="space-y-1">
|
||||
<a href="{{ route('reports.geographic', [$website] + $q) }}" class="block text-sm text-indigo-600 hover:text-indigo-800">Geographic</a>
|
||||
<a href="{{ route('reports.technology', [$website] + $q) }}" class="block text-sm text-indigo-600 hover:text-indigo-800">Technology</a>
|
||||
<a href="{{ route('reports.language', [$website] + $q) }}" class="block text-sm text-indigo-600 hover:text-indigo-800">Language</a>
|
||||
<a href="{{ route('reports.new-vs-returning', [$website] + $q) }}" class="block text-sm text-indigo-600 hover:text-indigo-800">New vs Returning</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Acquisition</h4>
|
||||
<div class="space-y-1">
|
||||
<a href="{{ route('reports.sources', [$website] + $q) }}" class="block text-sm text-indigo-600 hover:text-indigo-800">Traffic Sources</a>
|
||||
<a href="{{ route('reports.campaigns', [$website] + $q) }}" class="block text-sm text-indigo-600 hover:text-indigo-800">Campaigns</a>
|
||||
<a href="{{ route('reports.referrers', [$website] + $q) }}" class="block text-sm text-indigo-600 hover:text-indigo-800">Referrers</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Behavior</h4>
|
||||
<div class="space-y-1">
|
||||
<a href="{{ route('reports.pages', [$website] + $q) }}" class="block text-sm text-indigo-600 hover:text-indigo-800">Pages</a>
|
||||
<a href="{{ route('reports.landing-pages', [$website] + $q) }}" class="block text-sm text-indigo-600 hover:text-indigo-800">Landing Pages</a>
|
||||
<a href="{{ route('reports.exit-pages', [$website] + $q) }}" class="block text-sm text-indigo-600 hover:text-indigo-800">Exit Pages</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Events</h4>
|
||||
<div class="space-y-1">
|
||||
<a href="{{ route('reports.events', [$website] + $q) }}" class="block text-sm text-indigo-600 hover:text-indigo-800">Events Overview</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
<x-report-layout :website="$website" :from="$from" :to="$to" title="Campaigns (UTM)">
|
||||
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
|
||||
@if ($campaigns->isEmpty())
|
||||
<div class="px-6 py-12 text-center text-sm text-gray-500">No campaign data available. Traffic with UTM parameters will appear here.</div>
|
||||
@else
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Source</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Medium</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Campaign</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Sessions</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Bounce Rate</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Avg. Duration</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
@foreach ($campaigns as $row)
|
||||
<tr>
|
||||
<td class="px-6 py-3 text-sm text-gray-900">{{ $row->utm_source }}</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-500">{{ $row->utm_medium ?? '—' }}</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-500">{{ $row->utm_campaign ?? '—' }}</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 text-right">{{ number_format($row->sessions) }}</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 text-right">{{ $row->sessions > 0 ? round(($row->bounces / $row->sessions) * 100, 1) : 0 }}%</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 text-right">{{ gmdate('i:s', (int) round($row->avg_duration)) }}</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
</x-report-layout>
|
||||
@@ -0,0 +1,32 @@
|
||||
<x-report-layout :website="$website" :from="$from" :to="$to" title="Referrers">
|
||||
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
|
||||
@if ($referrers->isEmpty())
|
||||
<div class="px-6 py-12 text-center text-sm text-gray-500">No referrer data available for this period.</div>
|
||||
@else
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Referrer Domain</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Sessions</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Bounce Rate</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Avg. Duration</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
@foreach ($referrers as $row)
|
||||
<tr>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 font-medium">{{ $row->referrer_domain }}</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 text-right">{{ number_format($row->sessions) }}</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 text-right">{{ $row->sessions > 0 ? round(($row->bounces / $row->sessions) * 100, 1) : 0 }}%</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 text-right">{{ gmdate('i:s', (int) round($row->avg_duration)) }}</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
</x-report-layout>
|
||||
@@ -0,0 +1,34 @@
|
||||
<x-report-layout :website="$website" :from="$from" :to="$to" title="Traffic Sources">
|
||||
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
|
||||
@if ($sources->isEmpty())
|
||||
<div class="px-6 py-12 text-center text-sm text-gray-500">No traffic source data available for this period.</div>
|
||||
@else
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Source</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Sessions</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Bounce Rate</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Avg. Duration</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Pages / Session</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
@foreach ($sources as $row)
|
||||
<tr>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 font-medium">{{ $row->source }}</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 text-right">{{ number_format($row->sessions) }}</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 text-right">{{ $row->sessions > 0 ? round(($row->bounces / $row->sessions) * 100, 1) : 0 }}%</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 text-right">{{ gmdate('i:s', (int) round($row->avg_duration)) }}</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 text-right">{{ round($row->avg_pages, 1) }}</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
</x-report-layout>
|
||||
@@ -0,0 +1,64 @@
|
||||
<x-report-layout :website="$website" :from="$from" :to="$to" title="Geographic Report">
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-4">Visitors by Country</h3>
|
||||
@if ($countries->isEmpty())
|
||||
<p class="text-sm text-gray-500 py-8 text-center">No geographic data available for this period.</p>
|
||||
@else
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Country</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Visitors</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">%</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
@php $totalCountry = $countries->sum('visitors'); @endphp
|
||||
@foreach ($countries as $row)
|
||||
<tr>
|
||||
<td class="px-6 py-3 text-sm text-gray-900">{{ $row->country }}</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 text-right">{{ number_format($row->visitors) }}</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-500 text-right">{{ $totalCountry > 0 ? round(($row->visitors / $totalCountry) * 100, 1) : 0 }}%</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-4">Visitors by City</h3>
|
||||
@if ($cities->isEmpty())
|
||||
<p class="text-sm text-gray-500 py-8 text-center">No city-level data available.</p>
|
||||
@else
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">City</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Region</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Country</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Visitors</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
@foreach ($cities as $row)
|
||||
<tr>
|
||||
<td class="px-6 py-3 text-sm text-gray-900">{{ $row->city }}</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-500">{{ $row->region }}</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-500">{{ $row->country }}</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 text-right">{{ number_format($row->visitors) }}</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</x-report-layout>
|
||||
@@ -0,0 +1,25 @@
|
||||
<x-report-layout :website="$website" :from="$from" :to="$to" title="Language Report">
|
||||
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-4">Visitors by Language</h3>
|
||||
@if ($languages->isNotEmpty())
|
||||
@php $total = $languages->sum('visitors'); @endphp
|
||||
<div class="space-y-3">
|
||||
@foreach ($languages as $row)
|
||||
<div>
|
||||
<div class="flex justify-between text-sm mb-1">
|
||||
<span class="text-gray-900">{{ $row->language }}</span>
|
||||
<span class="text-gray-500">{{ number_format($row->visitors) }} ({{ $total > 0 ? round(($row->visitors / $total) * 100, 1) : 0 }}%)</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-100 rounded-full h-2">
|
||||
<div class="bg-indigo-500 h-2 rounded-full" style="width: {{ $total > 0 ? ($row->visitors / $total) * 100 : 0 }}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<p class="text-sm text-gray-500 py-8 text-center">No language data available for this period.</p>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
</x-report-layout>
|
||||
@@ -0,0 +1,33 @@
|
||||
<x-report-layout :website="$website" :from="$from" :to="$to" title="New vs Returning Visitors">
|
||||
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
|
||||
@if ($data['new'] === 0 && $data['returning'] === 0)
|
||||
<p class="text-sm text-gray-500 py-8 text-center">No visitor data available for this period.</p>
|
||||
@else
|
||||
<div class="grid gap-6 sm:grid-cols-2 max-w-lg mx-auto">
|
||||
<div class="rounded-lg border-2 border-indigo-200 bg-indigo-50 p-6 text-center">
|
||||
<div class="text-3xl font-bold text-indigo-700">{{ $data['new_pct'] }}%</div>
|
||||
<div class="text-sm font-medium text-indigo-600 mt-1">New Visitors</div>
|
||||
<div class="text-xs text-indigo-400 mt-0.5">{{ number_format($data['new']) }} visitors</div>
|
||||
</div>
|
||||
<div class="rounded-lg border-2 border-emerald-200 bg-emerald-50 p-6 text-center">
|
||||
<div class="text-3xl font-bold text-emerald-700">{{ $data['returning_pct'] }}%</div>
|
||||
<div class="text-sm font-medium text-emerald-600 mt-1">Returning Visitors</div>
|
||||
<div class="text-xs text-emerald-400 mt-0.5">{{ number_format($data['returning']) }} visitors</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 max-w-lg mx-auto">
|
||||
<div class="w-full bg-gray-100 rounded-full h-4 overflow-hidden flex">
|
||||
<div class="bg-indigo-500 h-4" style="width: {{ $data['new_pct'] }}%"></div>
|
||||
<div class="bg-emerald-500 h-4" style="width: {{ $data['returning_pct'] }}%"></div>
|
||||
</div>
|
||||
<div class="flex justify-between text-xs text-gray-500 mt-1">
|
||||
<span>New</span>
|
||||
<span>Returning</span>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
</x-report-layout>
|
||||
@@ -0,0 +1,99 @@
|
||||
<x-report-layout :website="$website" :from="$from" :to="$to" title="Technology Report">
|
||||
|
||||
<div class="space-y-6">
|
||||
{{-- Device Type --}}
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-4">Device Type</h3>
|
||||
@if ($devices->isNotEmpty())
|
||||
@php $totalDevices = $devices->sum('visitors'); @endphp
|
||||
<div class="grid gap-4 sm:grid-cols-3 mb-4">
|
||||
@foreach ($devices as $row)
|
||||
<div class="rounded-lg border border-gray-200 p-4 text-center">
|
||||
<div class="text-2xl font-bold text-gray-900">{{ $totalDevices > 0 ? round(($row->visitors / $totalDevices) * 100, 1) : 0 }}%</div>
|
||||
<div class="text-sm text-gray-500 capitalize mt-1">{{ $row->device_type ?? 'Unknown' }}</div>
|
||||
<div class="text-xs text-gray-400">{{ number_format($row->visitors) }} visitors</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<p class="text-sm text-gray-500 py-4 text-center">No device data available.</p>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="grid gap-6 lg:grid-cols-2">
|
||||
{{-- Browsers --}}
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-4">Browsers</h3>
|
||||
@if ($browsers->isNotEmpty())
|
||||
@php $totalBrowsers = $browsers->sum('visitors'); @endphp
|
||||
<div class="space-y-3">
|
||||
@foreach ($browsers as $row)
|
||||
<div>
|
||||
<div class="flex justify-between text-sm mb-1">
|
||||
<span class="text-gray-900">{{ $row->browser }}</span>
|
||||
<span class="text-gray-500">{{ number_format($row->visitors) }} ({{ $totalBrowsers > 0 ? round(($row->visitors / $totalBrowsers) * 100, 1) : 0 }}%)</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-100 rounded-full h-2">
|
||||
<div class="bg-indigo-500 h-2 rounded-full" style="width: {{ $totalBrowsers > 0 ? ($row->visitors / $totalBrowsers) * 100 : 0 }}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<p class="text-sm text-gray-500 py-4 text-center">No browser data available.</p>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- Operating Systems --}}
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-4">Operating Systems</h3>
|
||||
@if ($operatingSystems->isNotEmpty())
|
||||
@php $totalOS = $operatingSystems->sum('visitors'); @endphp
|
||||
<div class="space-y-3">
|
||||
@foreach ($operatingSystems as $row)
|
||||
<div>
|
||||
<div class="flex justify-between text-sm mb-1">
|
||||
<span class="text-gray-900">{{ $row->os }}</span>
|
||||
<span class="text-gray-500">{{ number_format($row->visitors) }} ({{ $totalOS > 0 ? round(($row->visitors / $totalOS) * 100, 1) : 0 }}%)</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-100 rounded-full h-2">
|
||||
<div class="bg-emerald-500 h-2 rounded-full" style="width: {{ $totalOS > 0 ? ($row->visitors / $totalOS) * 100 : 0 }}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<p class="text-sm text-gray-500 py-4 text-center">No OS data available.</p>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Screen Resolutions --}}
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-4">Screen Resolutions</h3>
|
||||
@if ($resolutions->isNotEmpty())
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Resolution</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Visitors</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
@foreach ($resolutions as $row)
|
||||
<tr>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 font-mono">{{ $row->screen_resolution }}</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 text-right">{{ number_format($row->visitors) }}</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@else
|
||||
<p class="text-sm text-gray-500 py-4 text-center">No screen resolution data available.</p>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</x-report-layout>
|
||||
@@ -0,0 +1,28 @@
|
||||
<x-report-layout :website="$website" :from="$from" :to="$to" title="Exit Pages">
|
||||
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
|
||||
@if ($pages->isEmpty())
|
||||
<div class="px-6 py-12 text-center text-sm text-gray-500">No exit page data available for this period.</div>
|
||||
@else
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Exit Page</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Exits</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
@foreach ($pages as $row)
|
||||
<tr>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 font-mono max-w-md truncate">{{ $row->path }}</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 text-right">{{ number_format($row->exits) }}</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
</x-report-layout>
|
||||
@@ -0,0 +1,32 @@
|
||||
<x-report-layout :website="$website" :from="$from" :to="$to" title="Landing Pages">
|
||||
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
|
||||
@if ($pages->isEmpty())
|
||||
<div class="px-6 py-12 text-center text-sm text-gray-500">No landing page data available for this period.</div>
|
||||
@else
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Entry Page</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Sessions</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Bounce Rate</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Avg. Duration</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
@foreach ($pages as $row)
|
||||
<tr>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 font-mono max-w-md truncate">{{ $row->path }}</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 text-right">{{ number_format($row->sessions) }}</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 text-right">{{ $row->sessions > 0 ? round(($row->bounces / $row->sessions) * 100, 1) : 0 }}%</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 text-right">{{ gmdate('i:s', (int) round($row->avg_duration)) }}</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
</x-report-layout>
|
||||
@@ -0,0 +1,32 @@
|
||||
<x-report-layout :website="$website" :from="$from" :to="$to" title="Pages Report">
|
||||
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
|
||||
@if ($pages->isEmpty())
|
||||
<div class="px-6 py-12 text-center text-sm text-gray-500">No page view data available for this period.</div>
|
||||
@else
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Page Path</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Views</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Unique Views</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Avg. Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
@foreach ($pages as $row)
|
||||
<tr>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 font-mono max-w-md truncate">{{ $row->path }}</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 text-right">{{ number_format($row->views) }}</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 text-right">{{ number_format($row->unique_views) }}</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 text-right">{{ $row->avg_time !== null ? gmdate('i:s', (int) round($row->avg_time)) : '—' }}</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
</x-report-layout>
|
||||
@@ -0,0 +1,73 @@
|
||||
<x-report-layout :website="$website" :from="$from" :to="$to" :title="'Event: ' . $eventName">
|
||||
|
||||
<div class="space-y-6">
|
||||
{{-- Trending Chart --}}
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-4">Trend</h3>
|
||||
<div style="height: 240px;">
|
||||
<canvas id="event-trend-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Detail Table --}}
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
|
||||
@if ($details->isEmpty())
|
||||
<div class="px-6 py-12 text-center text-sm text-gray-500">No detail breakdown available.</div>
|
||||
@else
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Label</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Count</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Total Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
@foreach ($details as $row)
|
||||
<tr>
|
||||
<td class="px-6 py-3 text-sm text-gray-900">{{ $row->action ?? '—' }}</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-500">{{ $row->label ?? '—' }}</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 text-right">{{ number_format($row->total) }}</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 text-right">{{ $row->total_value ? number_format($row->total_value, 2) : '—' }}</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot name="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($trending);
|
||||
new Chart(document.getElementById('event-trend-chart'), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: raw.map(d => d.period),
|
||||
datasets: [{
|
||||
label: '{{ $eventName }}',
|
||||
data: raw.map(d => d.total),
|
||||
backgroundColor: 'rgba(99, 102, 241, 0.7)',
|
||||
borderRadius: 4,
|
||||
}],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: { legend: { display: false } },
|
||||
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: { precision: 0, font: { size: 11 }, color: '#9ca3af' } },
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</x-slot>
|
||||
|
||||
</x-report-layout>
|
||||
@@ -0,0 +1,38 @@
|
||||
<x-report-layout :website="$website" :from="$from" :to="$to" title="Events Overview">
|
||||
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
|
||||
@if ($events->isEmpty())
|
||||
<div class="px-6 py-12 text-center text-sm text-gray-500">No events tracked for this period.</div>
|
||||
@else
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Event Name</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Unique Visitors</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Total Value</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
@foreach ($events as $row)
|
||||
<tr>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 font-medium">{{ $row->name }}</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-500">{{ $row->category ?? '—' }}</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 text-right">{{ number_format($row->total) }}</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 text-right">{{ number_format($row->unique_visitors) }}</td>
|
||||
<td class="px-6 py-3 text-sm text-gray-900 text-right">{{ $row->total_value ? number_format($row->total_value, 2) : '—' }}</td>
|
||||
<td class="px-6 py-3 text-sm text-right">
|
||||
<a href="{{ route('reports.event-detail', [$website, $row->name] + request()->only(['range', 'from', 'to'])) }}" class="text-indigo-600 hover:text-indigo-800">Details</a>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
</x-report-layout>
|
||||
Reference in New Issue
Block a user