nimuli/resources/views/livewire/pages/dashboard/overview.blade.php

<div>
    {{-- Quick Actions --}}
    <div class="flex items-center gap-3 mb-6">
        <a href="{{ route('w.links.index', request()->route('workspace')) }}"
           class="px-4 py-2 bg-accent-gradient text-white rounded-lg text-sm font-medium hover:opacity-90 transition-opacity">
            + Create Link
        </a>
        <a href="{{ route('w.qr.index', request()->route('workspace')) }}"
           class="px-4 py-2 bg-s2 text-t1 border border-white/[.06] rounded-lg text-sm font-medium hover:bg-s3 transition-colors">
            + Create QR Code
        </a>
        <a href="{{ route('w.analytics.index', request()->route('workspace')) }}"
           class="px-4 py-2 text-t2 text-sm font-medium hover:text-t1 transition-colors">
            View Analytics →
        </a>
    </div>

    {{-- Hero Metrics --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {{-- Clicks Today --}}
        <div class="bg-s1 border border-white/[.06] rounded-xl p-5">
            <div class="text-xs font-medium text-t2 uppercase tracking-wider">Clicks Today</div>
            <div class="text-3xl font-semibold font-mono text-t1 mt-2">{{ number_format($today) }}</div>
            <div class="text-xs text-t3 mt-1">since midnight</div>
        </div>

        {{-- Last 7 Days --}}
        <div class="bg-s1 border border-white/[.06] rounded-xl p-5">
            <div class="text-xs font-medium text-t2 uppercase tracking-wider">Last 7 Days</div>
            <div class="text-3xl font-semibold font-mono text-t1 mt-2">{{ number_format($last7) }}</div>
            <div class="text-xs text-t3 mt-1">rolling 7-day window</div>
        </div>

        {{-- Last 30 Days --}}
        <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 class="text-xs text-t3 mt-1">rolling 30-day window</div>
        </div>

        {{-- Total Links --}}
        <div class="bg-s1 border border-white/[.06] rounded-xl p-5">
            <div class="text-xs font-medium text-t2 uppercase tracking-wider">Total Links</div>
            <div class="text-3xl font-semibold font-mono text-t1 mt-2">{{ number_format($totalLinks) }}</div>
            <div class="text-xs text-t3 mt-1">active links</div>
        </div>
    </div>

    {{-- 30-Day Chart --}}
    <div
        class="bg-s1 border border-white/[.06] rounded-xl p-5 mt-4"
        x-data
        x-init="
            const ctx = document.getElementById('clicksChart');
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: {{ Js::from($labels) }},
                    datasets: [{
                        data: {{ Js::from($data) }},
                        borderColor: '#4f8ef7',
                        backgroundColor: 'rgba(79,142,247,0.08)',
                        fill: true,
                        tension: 0.4,
                        pointRadius: 0,
                        borderWidth: 2,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: {
                        x: {
                            grid: { color: 'rgba(255,255,255,0.04)' },
                            ticks: { color: '#8888a0', font: { size: 11 } }
                        },
                        y: {
                            grid: { color: 'rgba(255,255,255,0.04)' },
                            ticks: { color: '#8888a0', font: { size: 11 } },
                            beginAtZero: true
                        }
                    }
                }
            });
        "
    >
        <h3 class="text-sm font-medium text-t1 mb-4">Clicks — Last 30 Days</h3>
        <div class="h-48">
            <canvas id="clicksChart"></canvas>
        </div>
    </div>

    {{-- Top 5 Links --}}
    <div class="bg-s1 border border-white/[.06] rounded-xl mt-4 overflow-hidden">
        <div class="px-5 py-4 border-b border-white/[.06]">
            <h3 class="text-sm font-medium text-t1">Top Links</h3>
        </div>
        <table class="w-full text-sm">
            <thead>
                <tr class="text-xs font-medium text-t2 uppercase tracking-wider border-b border-white/[.06]">
                    <th class="px-5 py-3 text-left w-10">#</th>
                    <th class="px-5 py-3 text-left">Slug</th>
                    <th class="px-5 py-3 text-left">Title</th>
                    <th class="px-5 py-3 text-right">Clicks</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-white/[.04]">
                @forelse($topLinks as $index => $link)
                <tr class="hover:bg-s2/50 transition-colors">
                    <td class="px-5 py-3 text-t3 font-mono text-xs">{{ $index + 1 }}</td>
                    <td class="px-5 py-3">
                        <span class="font-mono text-blue text-sm">{{ $link->slug }}</span>
                    </td>
                    <td class="px-5 py-3 text-t2 text-sm truncate max-w-xs">
                        {{ $link->title ?: '—' }}
                    </td>
                    <td class="px-5 py-3 text-right font-mono text-t1 font-semibold">
                        {{ number_format($link->total_clicks) }}
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="4" class="px-5 py-10 text-center text-t3">No links yet.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>