phase 8 and 9

This commit is contained in:
Stefanescu Mihai
2026-03-19 18:42:19 +02:00
parent d75cabfeec
commit 82ebb697f3
94 changed files with 4498 additions and 749 deletions
@@ -1,8 +1,8 @@
<x-report-layout :website="$website" :from="$from" :to="$to" title="Exit Pages">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="rounded-xl border border-gray-200 bg-white overflow-hidden">
@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>
<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">
@@ -1,8 +1,8 @@
<x-report-layout :website="$website" :from="$from" :to="$to" title="Landing Pages">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="rounded-xl border border-gray-200 bg-white overflow-hidden">
@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>
<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">
@@ -1,9 +1,26 @@
<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
@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">
@@ -26,7 +43,45 @@
</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() {
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>