105 lines
5.2 KiB
PHP
105 lines
5.2 KiB
PHP
<div>
|
|
{{-- Header --}}
|
|
<div class="flex flex-wrap items-center justify-between gap-3 mb-6">
|
|
<h1 class="text-2xl font-bold text-t1">Analytics</h1>
|
|
|
|
{{-- Range buttons --}}
|
|
<div class="flex gap-1.5">
|
|
@foreach(['24h' => '24h', '7d' => '7d', '30d' => '30d', '90d' => '90d'] as $key => $label)
|
|
<button wire:click="setRange('{{ $key }}')"
|
|
class="px-3 py-1.5 text-xs rounded-lg font-medium transition-all
|
|
{{ $range === $key
|
|
? 'bg-accent-gradient text-white'
|
|
: 'bg-s2 text-t2 border border-white/[.06] hover:text-t1' }}">
|
|
{{ $label }}
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Filter bar --}}
|
|
<div class="flex flex-wrap gap-2 mb-6">
|
|
<select wire:model.live="country"
|
|
class="px-3 py-2 bg-s1 border border-white/[.06] rounded-lg text-xs text-t1 focus:outline-none focus:ring-1 focus:ring-blue/50 min-w-[130px]">
|
|
<option value="">All Countries</option>
|
|
@foreach($countries as $c)
|
|
<option value="{{ $c }}" @selected($country === $c)>{{ $c }}</option>
|
|
@endforeach
|
|
</select>
|
|
|
|
<select wire:model.live="device"
|
|
class="px-3 py-2 bg-s1 border border-white/[.06] rounded-lg text-xs text-t1 focus:outline-none focus:ring-1 focus:ring-blue/50 min-w-[130px]">
|
|
<option value="">All Devices</option>
|
|
@foreach($devices as $d)
|
|
<option value="{{ $d }}" @selected($device === $d)>{{ ucfirst($d) }}</option>
|
|
@endforeach
|
|
</select>
|
|
|
|
<select wire:model.live="linkId"
|
|
class="px-3 py-2 bg-s1 border border-white/[.06] rounded-lg text-xs text-t1 focus:outline-none focus:ring-1 focus:ring-blue/50 min-w-[150px]">
|
|
<option value="">All Links</option>
|
|
@foreach($links as $l)
|
|
<option value="{{ $l->ulid }}" @selected($linkId === $l->ulid)>{{ $l->slug }}{{ $l->title ? ' — ' . $l->title : '' }}</option>
|
|
@endforeach
|
|
</select>
|
|
|
|
@if($country || $device || $linkId)
|
|
<button wire:click="$set('country', ''); $set('device', ''); $set('linkId', '')"
|
|
class="px-3 py-2 text-xs text-red hover:opacity-80 transition-opacity flex items-center gap-1">
|
|
<x-heroicon-o-x-mark class="w-3 h-3" />
|
|
Clear filters
|
|
</button>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Summary metrics --}}
|
|
<div class="grid grid-cols-2 md:grid-cols-3 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">{{ strtoupper($range) }} Clicks</div>
|
|
<div class="text-3xl font-bold font-mono text-t1 mt-2">{{ number_format($totalFiltered) }}</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">All-time Clicks</div>
|
|
<div class="text-3xl font-bold font-mono text-t1 mt-2">{{ number_format($allTime) }}</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">Today</div>
|
|
<div class="text-3xl font-bold font-mono text-t1 mt-2">{{ number_format($totalToday) }}</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-semibold 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">
|
|
<button wire:click="$set('country', '{{ $row->country }}')"
|
|
class="text-sm text-t1 hover:text-blue transition-colors text-left {{ $country === $row->country ? 'text-blue font-medium' : '' }}">
|
|
{{ $row->country }}
|
|
</button>
|
|
<span class="text-sm font-mono text-t2">{{ number_format($row->total) }}</span>
|
|
</div>
|
|
@empty
|
|
<p class="text-sm text-t3">No data for this period</p>
|
|
@endforelse
|
|
</div>
|
|
|
|
{{-- By Device --}}
|
|
<div class="bg-s1 border border-white/[.06] rounded-xl p-5">
|
|
<h3 class="text-sm font-semibold 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">
|
|
<button wire:click="$set('device', '{{ $row->device }}')"
|
|
class="text-sm text-t1 capitalize hover:text-blue transition-colors text-left {{ $device === $row->device ? 'text-blue font-medium' : '' }}">
|
|
{{ $row->device ?? 'Unknown' }}
|
|
</button>
|
|
<span class="text-sm font-mono text-t2">{{ number_format($row->total) }}</span>
|
|
</div>
|
|
@empty
|
|
<p class="text-sm text-t3">No data for this period</p>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</div>
|