phase 3
This commit is contained in:
Stefanescu Mihai
@@ -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>
|
||||
Reference in New Issue
Block a user