51 lines
2.5 KiB
PHP
51 lines
2.5 KiB
PHP
<div>
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h1 class="text-2xl font-semibold text-t1">Analytics</h1>
|
|
<div class="flex gap-2">
|
|
<button class="px-3 py-1.5 text-xs bg-blue text-white rounded-lg">30d</button>
|
|
<button class="px-3 py-1.5 text-xs bg-s2 text-t2 rounded-lg hover:text-t1 border border-white/[.06]">7d</button>
|
|
<button class="px-3 py-1.5 text-xs bg-s2 text-t2 rounded-lg hover:text-t1 border border-white/[.06]">90d</button>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Summary metrics --}}
|
|
<div class="grid grid-cols-2 gap-4 mb-6">
|
|
<div class="bg-s1 border border-white/[.06] rounded-xl p-5">
|
|
<div class="text-xs font-medium text-t2 uppercase tracking-wider">Total Clicks</div>
|
|
<div class="text-3xl font-semibold font-mono text-t1 mt-2">{{ number_format($totalClicks) }}</div>
|
|
</div>
|
|
<div class="bg-s1 border border-white/[.06] rounded-xl p-5">
|
|
<div class="text-xs font-medium text-t2 uppercase tracking-wider">Last 30 Days</div>
|
|
<div class="text-3xl font-semibold font-mono text-t1 mt-2">{{ number_format($last30) }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{{-- Top Countries --}}
|
|
<div class="bg-s1 border border-white/[.06] rounded-xl p-5">
|
|
<h3 class="text-sm font-medium text-t1 mb-4">Top Countries</h3>
|
|
@forelse($byCountry as $row)
|
|
<div class="flex items-center justify-between py-2 border-b border-white/[.03] last:border-0">
|
|
<span class="text-sm text-t1">{{ $row->country }}</span>
|
|
<span class="text-sm font-mono text-t2">{{ number_format($row->total) }}</span>
|
|
</div>
|
|
@empty
|
|
<p class="text-sm text-t3">No data yet</p>
|
|
@endforelse
|
|
</div>
|
|
|
|
{{-- By Device --}}
|
|
<div class="bg-s1 border border-white/[.06] rounded-xl p-5">
|
|
<h3 class="text-sm font-medium text-t1 mb-4">By Device</h3>
|
|
@forelse($byDevice as $row)
|
|
<div class="flex items-center justify-between py-2 border-b border-white/[.03] last:border-0">
|
|
<span class="text-sm text-t1 capitalize">{{ $row->device }}</span>
|
|
<span class="text-sm font-mono text-t2">{{ number_format($row->total) }}</span>
|
|
</div>
|
|
@empty
|
|
<p class="text-sm text-t3">No data yet</p>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</div>
|