Audit Log Viewer

<div class="w-full max-w-5xl mx-auto font-sans">
        <div class="flex flex-col md:flex-row gap-4 mb-6">
            <div class="flex-1 relative">
                <input type="text" placeholder="Filter audit logs..."
                    class="w-full bg-zinc-900 border border-zinc-800 px-10 py-2.5 rounded-lg text-sm text-white focus:border-indigo-500 outline-none">
                <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-500" fill="none"
                    stroke="currentColor" viewBox="0 0 24 24">
                    <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                </svg>
            </div>
            <div class="flex gap-2">
                <button
                    class="px-4 py-2 bg-zinc-900 border border-zinc-800 text-xs font-bold text-zinc-400 rounded-lg hover:bg-zinc-800 transition-all">Date
                    Range</button>
                <button
                    class="px-4 py-2 bg-zinc-900 border border-zinc-800 text-xs font-bold text-zinc-400 rounded-lg hover:bg-zinc-800 transition-all">Event
                    Type</button>
                <button
                    class="px-4 py-2 bg-indigo-600 text-white text-xs font-bold rounded-lg shadow-lg shadow-indigo-600/20 transition-all">Export
                    CSV</button>
            </div>
        </div>
        <div class="bg-zinc-900 border border-zinc-800 rounded-xl overflow-hidden shadow-2xl">
            <div
                class="p-4 bg-zinc-950/50 grid grid-cols-5 gap-4 text-[10px] font-black text-zinc-500 uppercase tracking-widest">
                <div class="col-span-2">Event & User</div>
                <div>Status</div>
                <div>Location</div>
                <div class="text-right">Time</div>
            </div>
            <div class="divide-y divide-zinc-800">
                <div class="p-4 grid grid-cols-5 gap-4 items-center hover:bg-zinc-800/30 transition-all cursor-pointer">
                    <div class="col-span-2 flex items-center gap-3">
                        <div
                            class="w-8 h-8 rounded-full bg-indigo-500/10 flex items-center justify-center text-indigo-400 font-bold text-[10px]">
                            AR</div>
                        <div>
                            <div class="text-sm font-semibold text-white">Infrastructure Deletion</div>
                            <div class="text-xs text-zinc-500">Alex Rivera (alex@hub.io)</div>
                        </div>
                    </div>
                    <div><span
                            class="px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-500 text-[10px] font-bold border border-emerald-500/20">SUCCESS</span>
                    </div>
                    <div class="text-xs text-zinc-500">Stockholm, SE (91.42.x.x)</div>
                    <div class="text-xs text-zinc-500 text-right">2m ago</div>
                </div>
                <div class="p-4 grid grid-cols-5 gap-4 items-center hover:bg-zinc-800/30 transition-all cursor-pointer">
                    <div class="col-span-2 flex items-center gap-3">
                        <div
                            class="w-8 h-8 rounded-full bg-zinc-800 flex items-center justify-center text-zinc-500 font-bold text-[10px]">
                            SK</div>
                        <div>
                            <div class="text-sm font-semibold text-white">API Key Rotated</div>
                            <div class="text-xs text-zinc-500">Staging Bot #4</div>
                        </div>
                    </div>
                    <div><span
                            class="px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-500 text-[10px] font-bold border border-emerald-500/20">SUCCESS</span>
                    </div>
                    <div class="text-xs text-zinc-500">US-EAST-1 (VPC-Internal)</div>
                    <div class="text-xs text-zinc-500 text-right">15m ago</div>
                </div>
                <div class="p-4 grid grid-cols-5 gap-4 items-center hover:bg-zinc-800/30 transition-all cursor-pointer">
                    <div class="col-span-2 flex items-center gap-3">
                        <div
                            class="w-8 h-8 rounded-full bg-rose-500/10 flex items-center justify-center text-rose-500 font-bold text-[10px]">
                            !!</div>
                        <div>
                            <div class="text-sm font-semibold text-white">Unauthorized Access Attempt</div>
                            <div class="text-xs text-zinc-500">Unknown (IP: 212.19.x.x)</div>
                        </div>
                    </div>
                    <div><span
                            class="px-2 py-0.5 rounded-full bg-rose-500/10 text-rose-500 text-[10px] font-bold border border-rose-500/20">FAILED</span>
                    </div>
                    <div class="text-xs text-zinc-500">Unknown Origin</div>
                    <div class="text-xs text-zinc-500 text-right">1h ago</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.querySelectorAll('button').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const originalText = btn.innerText;
                if (originalText === 'PROCESSING...' || originalText === 'SUCCESS') return;
                btn.innerText = 'PROCESSING...';
                btn.classList.add('opacity-50');
                setTimeout(() => {
                    btn.innerText = 'SUCCESS';
                    btn.classList.remove('opacity-50');
                    setTimeout(() => btn.innerText = originalText, 1500);
                }, 800);
            });
        });
    </script>