root/analytics
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit from hostslim

Browse Source
This commit is contained in:
root
2026-03-24 21:12:21 +01:00
commit 20fee7784c
252 changed files with 27385 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/reports/acquisition/campaigns.blade.php
+36
View File
@@ -0,0 +1,36 @@
<x-report-layout :website="$website" :from="$from" :to="$to" title="Campaigns (UTM)">
<div class="bg-white rounded-xl border border-gray-200">
@if ($campaigns->isEmpty())
<x-empty-state message="No campaign data available. Traffic with UTM parameters will appear here." />
@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-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Source</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Medium</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Campaign</th>
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Sessions</th>
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Bounce Rate</th>
<th class="px-4 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-4 py-2.5 text-sm text-gray-900">{{ $row->utm_source }}</td>
<td class="px-4 py-2.5 text-sm text-gray-500">{{ $row->utm_medium ?? '—' }}</td>
<td class="px-4 py-2.5 text-sm text-gray-500">{{ $row->utm_campaign ?? '—' }}</td>
<td class="px-4 py-2.5 text-sm text-gray-900 text-right tabular-nums">{{ number_format($row->sessions) }}</td>
<td class="px-4 py-2.5 text-sm text-gray-900 text-right tabular-nums">{{ $row->sessions > 0 ? round(($row->bounces / $row->sessions) * 100, 1) : 0 }}%</td>
<td class="px-4 py-2.5 text-sm text-gray-900 text-right tabular-nums">{{ gmdate('i:s', (int) round($row->avg_duration)) }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
@endif
</div>
</x-report-layout>
resources/views/reports/acquisition/referrers.blade.php
+32
View File
@@ -0,0 +1,32 @@
<x-report-layout :website="$website" :from="$from" :to="$to" title="Referrers">
<div class="rounded-xl border border-gray-200 bg-white overflow-hidden">
@if ($referrers->isEmpty())
<x-empty-state message="No referrer data available for this period." />
@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>
resources/views/reports/acquisition/sources.blade.php
+75
View File
@@ -0,0 +1,75 @@
<x-report-layout :website="$website" :from="$from" :to="$to" title="Traffic Sources">
@if ($sources->isEmpty())
<div class="bg-white rounded-xl border border-gray-200">
<x-empty-state message="No traffic source data available for this period." />
</div>
@else
@php
$chartSources = $sources->take(10);
@endphp
<div class="bg-white rounded-xl border border-gray-200 p-6 mb-6">
<h3 class="text-sm font-semibold text-gray-900 mb-4">Top Sources by Sessions</h3>
<div style="height: 280px;"><canvas id="sources-chart"></canvas></div>
</div>
<div class="bg-white rounded-xl border border-gray-200">
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Source</th>
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Sessions</th>
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Bounce Rate</th>
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Avg. Duration</th>
<th class="px-4 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-4 py-2.5 text-sm text-gray-900 font-medium">{{ $row->source }}</td>
<td class="px-4 py-2.5 text-sm text-gray-900 text-right tabular-nums">{{ number_format($row->sessions) }}</td>
<td class="px-4 py-2.5 text-sm text-gray-900 text-right tabular-nums">{{ $row->sessions > 0 ? round(($row->bounces / $row->sessions) * 100, 1) : 0 }}%</td>
<td class="px-4 py-2.5 text-sm text-gray-900 text-right tabular-nums">{{ gmdate('i:s', (int) round($row->avg_duration)) }}</td>
<td class="px-4 py-2.5 text-sm text-gray-900 text-right tabular-nums">{{ round($row->avg_pages, 1) }}</td>
</tr>
@endforeach
</tbody>
</table>
</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 colors = ['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#14b8a6', '#6366f1', '#10b981', '#f59e0b'];
const srcData = @json($chartSources->map(fn($s) => ['source' => $s->source, 'sessions' => $s->sessions])->values());
new Chart(document.getElementById('sources-chart'), {
type: 'bar',
data: {
labels: srcData.map(d => d.source),
datasets: [{ label: 'Sessions', data: srcData.map(d => d.sessions), backgroundColor: colors, borderRadius: 6 }]
},
options: {
indexAxis: 'y',
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: { backgroundColor: 'rgba(17,24,39,0.95)', padding: 10, cornerRadius: 8 }
},
scales: {
x: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.04)' } },
y: { grid: { display: false } }
}
}
});
});
</script>
</x-slot>
@endif
</x-report-layout>
resources/views/reports/audience/geographic.blade.php
+187
View File
@@ -0,0 +1,187 @@
<x-report-layout :website="$website" :from="$from" :to="$to" title="Geographic Report">
<x-slot name="scripts">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-geo@4/build/index.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', async function() {
const countriesData = @json($countries->map(fn($c) => ['country' => $c->country, 'visitors' => $c->visitors])->values());
if (countriesData.length > 0) {
// Bar chart
const barCtx = document.getElementById('countriesChart');
if (barCtx) {
new Chart(barCtx, {
type: 'bar',
data: {
labels: countriesData.slice(0, 10).map(d => d.country),
datasets: [{
label: 'Visitors',
data: countriesData.slice(0, 10).map(d => d.visitors),
backgroundColor: '#6366f1',
borderRadius: 6
}]
},
options: {
indexAxis: 'y',
responsive: true,
maintainAspectRatio: false,
plugins: {
tooltip: { backgroundColor: 'rgba(17,24,39,0.95)', padding: 10, cornerRadius: 8 },
legend: { display: false }
},
scales: {
x: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.04)' } },
y: { grid: { display: false } }
}
}
});
}
// World map
const mapCtx = document.getElementById('worldMap');
if (mapCtx && window.ChartGeo) {
try {
const resp = await fetch('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json');
const topoData = await resp.json();
const countries110 = ChartGeo.topojson.feature(topoData, topoData.objects.countries).features;
const countryMap = {};
countriesData.forEach(d => { countryMap[d.country] = d.visitors; });
const maxVisitors = Math.max(...countriesData.map(d => d.visitors));
new Chart(mapCtx, {
type: 'choropleth',
data: {
labels: countries110.map(f => f.properties.name),
datasets: [{
label: 'Visitors',
outline: countries110,
data: countries110.map(f => ({
feature: f,
value: countryMap[f.properties.name] || 0
})),
}]
},
options: {
showOutline: true,
showGraticule: false,
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: 'rgba(17,24,39,0.95)',
padding: 10,
cornerRadius: 8,
callbacks: {
label: (ctx) => {
const val = ctx.raw?.value || 0;
return val > 0 ? `${ctx.label}: ${val.toLocaleString()} visitors` : `${ctx.label}: 0`;
}
}
}
},
scales: {
projection: {
axis: 'x',
projection: 'equalEarth',
},
color: {
axis: 'x',
quantize: 5,
legend: { display: false },
interpolate: (v) => {
const r = Math.round(99 + (255 - 99) * (1 - v));
const g = Math.round(102 + (255 - 102) * (1 - v));
const b = Math.round(241 + (255 - 241) * (1 - v));
return `rgb(${r},${g},${b})`;
},
}
}
}
});
} catch (e) {
document.getElementById('worldMapContainer')?.classList.add('hidden');
}
}
}
});
</script>
</x-slot>
<div class="space-y-6">
{{-- World Map --}}
@if ($countries->isNotEmpty())
<div id="worldMapContainer" class="bg-white rounded-xl border border-gray-200 p-6">
<h3 class="text-base font-semibold text-gray-900 mb-4">World Map</h3>
<div style="height: 380px;"><canvas id="worldMap"></canvas></div>
</div>
@endif
{{-- Countries --}}
<div class="bg-white rounded-xl border border-gray-200 p-6">
<h3 class="text-base font-semibold text-gray-900 mb-4">Visitors by Country</h3>
@if ($countries->isEmpty())
<x-empty-state icon="globe" message="No geographic data available for this period." />
@else
<div class="grid gap-6 lg:grid-cols-2">
<div style="height: 320px;"><canvas id="countriesChart"></canvas></div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Country</th>
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Visitors</th>
<th class="px-4 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-4 py-2.5 text-sm text-gray-900">{{ $row->country }}</td>
<td class="px-4 py-2.5 text-sm text-gray-900 text-right tabular-nums">{{ number_format($row->visitors) }}</td>
<td class="px-4 py-2.5 text-sm text-gray-500 text-right tabular-nums">{{ $totalCountry > 0 ? round(($row->visitors / $totalCountry) * 100, 1) : 0 }}%</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
@endif
</div>
{{-- Cities --}}
<div class="bg-white rounded-xl border border-gray-200 p-6">
<h3 class="text-base font-semibold text-gray-900 mb-4">Visitors by City</h3>
@if ($cities->isEmpty())
<x-empty-state icon="globe" message="No city-level data available." />
@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-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">City</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Region</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Country</th>
<th class="px-4 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-4 py-2.5 text-sm text-gray-900">{{ $row->city }}</td>
<td class="px-4 py-2.5 text-sm text-gray-500">{{ $row->region }}</td>
<td class="px-4 py-2.5 text-sm text-gray-500">{{ $row->country }}</td>
<td class="px-4 py-2.5 text-sm text-gray-900 text-right tabular-nums">{{ number_format($row->visitors) }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
@endif
</div>
</div>
</x-report-layout>
resources/views/reports/audience/language.blade.php
+25
View File
@@ -0,0 +1,25 @@
<x-report-layout :website="$website" :from="$from" :to="$to" title="Language Report">
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden 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
<x-empty-state message="No language data available for this period." />
@endif
</div>
</x-report-layout>
resources/views/reports/audience/new-vs-returning.blade.php
+75
View File
@@ -0,0 +1,75 @@
<x-report-layout :website="$website" :from="$from" :to="$to" title="New vs Returning Visitors">
<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 newCount = {{ $data['new'] }};
const returningCount = {{ $data['returning'] }};
if (newCount > 0 || returningCount > 0) {
const ctx = document.getElementById('newVsReturningChart');
if (ctx) {
new Chart(ctx, {
type: 'pie',
data: {
labels: ['New Visitors', 'Returning Visitors'],
datasets: [{
data: [newCount, returningCount],
backgroundColor: ['#6366f1', '#10b981'],
borderWidth: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
tooltip: {
backgroundColor: 'rgba(17,24,39,0.95)',
padding: 10,
cornerRadius: 8
}
}
}
});
}
}
});
</script>
</x-slot>
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden p-6">
@if ($data['new'] === 0 && $data['returning'] === 0)
<x-empty-state message="No visitor data available for this period." />
@else
<div class="grid gap-6 lg:grid-cols-2">
<div class="h-64">
<canvas id="newVsReturningChart"></canvas>
</div>
<div class="grid gap-6 sm:grid-cols-2">
<div class="rounded-xl 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-xl 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>
<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>
resources/views/reports/audience/technology.blade.php
+137
View File
@@ -0,0 +1,137 @@
<x-report-layout :website="$website" :from="$from" :to="$to" title="Technology Report">
<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 devicesData = @json($devices->map(fn($d) => ['label' => $d->device_type ?? 'Unknown', 'visitors' => $d->visitors])->values());
if (devicesData.length > 0) {
const ctx = document.getElementById('deviceChart');
if (ctx) {
const colors = ['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#14b8a6'];
new Chart(ctx, {
type: 'doughnut',
data: {
labels: devicesData.map(d => d.label),
datasets: [{
data: devicesData.map(d => d.visitors),
backgroundColor: colors.slice(0, devicesData.length),
borderWidth: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
tooltip: {
backgroundColor: 'rgba(17,24,39,0.95)',
padding: 10,
cornerRadius: 8
}
}
}
});
}
}
});
</script>
</x-slot>
<div class="space-y-6">
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden 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-6 lg:grid-cols-2">
<div class="h-64">
<canvas id="deviceChart"></canvas>
</div>
<div class="grid gap-4 sm:grid-cols-3">
@foreach ($devices as $row)
<div class="rounded-xl 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>
</div>
@else
<x-empty-state message="No device data available." />
@endif
</div>
<div class="grid gap-6 lg:grid-cols-2">
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden 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
<x-empty-state message="No browser data available." />
@endif
</div>
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden 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
<x-empty-state message="No OS data available." />
@endif
</div>
</div>
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden 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
<x-empty-state message="No screen resolution data available." />
@endif
</div>
</div>
</x-report-layout>
resources/views/reports/behavior/exit-pages.blade.php
+28
View File
@@ -0,0 +1,28 @@
<x-report-layout :website="$website" :from="$from" :to="$to" title="Exit Pages">
<div class="rounded-xl border border-gray-200 bg-white overflow-hidden">
@if ($pages->isEmpty())
<x-empty-state message="No exit page data available for this period." />
@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>
resources/views/reports/behavior/landing-pages.blade.php
+32
View File
@@ -0,0 +1,32 @@
<x-report-layout :website="$website" :from="$from" :to="$to" title="Landing Pages">
<div class="rounded-xl border border-gray-200 bg-white overflow-hidden">
@if ($pages->isEmpty())
<x-empty-state message="No landing page data available for this period." />
@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>
resources/views/reports/behavior/pages.blade.php
+87
View File
@@ -0,0 +1,87 @@
<x-report-layout :website="$website" :from="$from" :to="$to" title="Pages Report">
@if ($pages->isEmpty())
<div class="rounded-xl border border-gray-200 bg-white overflow-hidden">
<x-empty-state message="No page view data available for this period." />
</div>
@else
@php
$chartPages = $pages->take(10);
$chartLabels = $chartPages->pluck('path')->map(fn ($p) => strlen($p) > 30 ? substr($p, 0, 27) . '...' : $p)->values()->toArray();
$chartData = $chartPages->pluck('views')->values()->toArray();
@endphp
<div class="rounded-xl border border-gray-200 bg-white overflow-hidden mb-6">
<div class="px-6 py-4 border-b border-gray-200">
<h2 class="text-sm font-semibold text-gray-900">Top 10 Pages by Views</h2>
</div>
<div class="p-6">
<div style="height: 280px;"><canvas id="pages-chart"></canvas></div>
</div>
</div>
<div class="rounded-xl border border-gray-200 bg-white overflow-hidden">
<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>
</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() {
new Chart(document.getElementById('pages-chart'), {
type: 'bar',
data: {
labels: @json($chartLabels),
datasets: [{
label: 'Views',
data: @json($chartData),
backgroundColor: ['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#14b8a6', '#6366f1', '#10b981', '#f59e0b'],
}]
},
options: {
indexAxis: 'y',
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: 'rgba(17, 24, 39, 0.9)',
titleColor: '#f9fafb',
bodyColor: '#e5e7eb',
borderColor: 'rgba(75, 85, 99, 0.5)',
borderWidth: 1
}
},
scales: {
x: { grid: { color: 'rgba(0,0,0,0.05)' } },
y: { grid: { display: false } }
}
}
});
});
</script>
</x-slot>
@endif
</x-report-layout>
resources/views/reports/conversions.blade.php
+112
View File
@@ -0,0 +1,112 @@
<x-report-layout :website="$website" :from="$from" :to="$to" title="Conversions">
<div class="space-y-6">
{{-- Summary Cards --}}
@php
$totalCompletions = $goals->sum('completions');
$totalValue = $goals->sum('total_value');
$overallRate = $totalSessions > 0 ? round(($totalCompletions / $totalSessions) * 100, 2) : 0;
@endphp
<div class="grid gap-4 sm:grid-cols-3">
<div class="bg-white rounded-xl border border-gray-200 p-5">
<dt class="text-sm font-medium text-gray-500">Total Completions</dt>
<dd class="mt-1 text-2xl font-bold text-gray-900">{{ number_format($totalCompletions) }}</dd>
</div>
<div class="bg-white rounded-xl border border-gray-200 p-5">
<dt class="text-sm font-medium text-gray-500">Overall Conversion Rate</dt>
<dd class="mt-1 text-2xl font-bold text-gray-900">{{ $overallRate }}%</dd>
</div>
<div class="bg-white rounded-xl border border-gray-200 p-5">
<dt class="text-sm font-medium text-gray-500">Total Goal Value</dt>
<dd class="mt-1 text-2xl font-bold text-gray-900">${{ number_format($totalValue, 2) }}</dd>
</div>
</div>
{{-- Completions Chart --}}
<div class="bg-white rounded-xl border border-gray-200 p-6">
<h3 class="text-base font-semibold text-gray-900 mb-4">Goal Completions Over Time</h3>
<div style="height: 240px;">
<canvas id="conversions-chart"></canvas>
</div>
</div>
{{-- Per-Goal Table --}}
<div class="bg-white rounded-xl border border-gray-200">
@if ($goals->isEmpty())
<x-empty-state message="No goals configured.">
<a href="{{ route('goals.create', $website) }}" class="text-sm text-indigo-600 hover:text-indigo-800">Create one</a>
</x-empty-state>
@else
@php
$typeLabels = [
'url_destination' => 'URL Destination',
'event_match' => 'Event Match',
'duration' => 'Duration',
'pages_per_session' => 'Pages / Session',
];
@endphp
<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">Goal</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Completions</th>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Conversion Rate</th>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Value</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
@foreach ($goals as $goal)
<tr>
<td class="px-6 py-4 text-sm font-medium text-gray-900">{{ $goal->name }}</td>
<td class="px-6 py-4 text-sm text-gray-500">{{ $typeLabels[$goal->type] ?? $goal->type }}</td>
<td class="px-6 py-4 text-sm text-gray-900 text-right">{{ number_format($goal->completions) }}</td>
<td class="px-6 py-4 text-sm text-gray-900 text-right">{{ $goal->conversion_rate }}%</td>
<td class="px-6 py-4 text-sm text-gray-900 text-right">{{ $goal->total_value ? '$' . number_format($goal->total_value, 2) : '—' }}</td>
<td class="px-6 py-4">
<span class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium {{ $goal->is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600' }}">
{{ $goal->is_active ? 'Active' : 'Inactive' }}
</span>
</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($chartData);
new Chart(document.getElementById('conversions-chart'), {
type: 'bar',
data: {
labels: raw.map(d => d.period),
datasets: [{
label: 'Completions',
data: raw.map(d => d.completions),
backgroundColor: 'rgba(16, 185, 129, 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>
resources/views/reports/events/detail.blade.php
+78
View File
@@ -0,0 +1,78 @@
<x-report-layout :website="$website" :from="$from" :to="$to" :title="'Event: ' . $eventName">
<div class="space-y-6">
<div class="rounded-xl border border-gray-200 bg-white overflow-hidden 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>
<div class="rounded-xl border border-gray-200 bg-white overflow-hidden">
@if ($details->isEmpty())
<x-empty-state message="No detail breakdown available." />
@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 },
tooltip: {
backgroundColor: 'rgba(17,24,39,0.95)',
padding: 10,
cornerRadius: 8,
},
},
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>
resources/views/reports/events/overview.blade.php
+38
View File
@@ -0,0 +1,38 @@
<x-report-layout :website="$website" :from="$from" :to="$to" title="Events Overview">
<div class="rounded-xl border border-gray-200 bg-white overflow-hidden">
@if ($events->isEmpty())
<x-empty-state message="No events tracked for this period." />
@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>