153 lines
9.4 KiB
PHP
153 lines
9.4 KiB
PHP
<x-app-layout>
|
|
<div class="space-y-6 pb-12">
|
|
{{-- SECTION 1: Header --}}
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
|
<div>
|
|
<h2 class="text-3xl font-black text-slate-800 tracking-tight leading-none mb-1 text-uppercase">Audit Trail</h2>
|
|
<p class="text-sm text-slate-500 font-medium italic uppercase tracking-tighter">Rekaman Aktivitas Staf & Keamanan Sistem</p>
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
{{-- Statistik --}}
|
|
<span class="px-4 py-2 bg-white border border-slate-200 rounded-xl text-[10px] font-black text-slate-400">
|
|
TOTAL: {{ $logs->total() }} LOGS
|
|
</span>
|
|
|
|
{{-- Export: Font Putih (text-white) --}}
|
|
<a href="{{ route('admin.logs.export') }}" class="inline-flex items-center px-6 py-4 bg-emerald-50 text-emerald-900 border-2 border-emerald-200 text-[10px] font-black rounded-2xl shadow-sm hover:bg-emerald-600 hover:text-white transition-all uppercase tracking-widest">
|
|
<i class="fas fa-file-excel mr-2 text-sm text-emerald-600 group-hover:text-white"></i> Export XLSX
|
|
</a>
|
|
|
|
{{-- Reset --}}
|
|
<form id="clear-logs-form" action="{{ route('admin.logs.clear') }}" method="POST" class="inline">
|
|
@csrf @method('DELETE')
|
|
<button type="button" onclick="confirmClearLogs()" class="inline-flex items-center px-5 py-3 bg-rose-50 text-rose-600 border border-rose-100 text-[10px] font-black rounded-2xl hover:bg-rose-100 transition-all uppercase tracking-widest">
|
|
<i class="fas fa-trash-alt mr-2 text-sm"></i> Clear Data
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- SECTION 2: Filter --}}
|
|
<div class="bg-white p-5 border border-slate-200 rounded-[2rem] shadow-sm">
|
|
<form action="{{ route('admin.logs.index') }}" method="GET" class="flex flex-col md:flex-row gap-4">
|
|
<div class="flex-1 relative">
|
|
<i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
|
|
<input type="text" name="search" value="{{ request('search') }}" placeholder="Cari deskripsi atau nama staf..."
|
|
class="w-full pl-11 pr-4 py-3.5 bg-slate-50 border border-slate-100 rounded-xl text-xs font-bold text-slate-700 focus:ring-2 focus:ring-indigo-100 transition-all">
|
|
</div>
|
|
|
|
{{-- Opsi Filter --}}
|
|
<select name="action" class="bg-slate-50 border border-slate-100 rounded-xl text-xs font-bold text-slate-700 px-5 py-3.5 focus:ring-2 focus:ring-indigo-100 transition-all">
|
|
<option value="">SEMUA AKSI</option>
|
|
<option value="CREATE" {{ request('action') == 'CREATE' ? 'selected' : '' }}>CREATE (Tambah)</option>
|
|
<option value="UPDATE" {{ request('action') == 'UPDATE' ? 'selected' : '' }}>UPDATE (Ubah)</option>
|
|
<option value="DELETE" {{ request('action') == 'DELETE' ? 'selected' : '' }}>DELETE (Hapus)</option>
|
|
<option value="LOGIN" {{ request('action') == 'LOGIN' ? 'selected' : '' }}>LOGIN</option>
|
|
</select>
|
|
|
|
<button type="submit" class="px-8 py-3.5 bg-slate-900 text-white text-[10px] font-black rounded-xl uppercase hover:bg-black transition-all">Filter</button>
|
|
@if(request()->anyFilled(['search', 'action']))
|
|
<a href="{{ route('admin.logs.index') }}" class="px-4 py-3.5 text-slate-400 hover:text-rose-600 text-[10px] font-black flex items-center transition-all uppercase">Reset</a>
|
|
@endif
|
|
</form>
|
|
</div>
|
|
|
|
{{-- SECTION 3: Tabel --}}
|
|
<div class="bg-white border border-slate-200 rounded-[2.5rem] overflow-hidden shadow-sm">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead class="bg-slate-50 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-100">
|
|
<tr>
|
|
<th class="px-6 py-4">Waktu</th>
|
|
<th class="px-6 py-4">Staf Pelaksana</th>
|
|
<th class="px-6 py-4 text-center">Aksi</th>
|
|
<th class="px-6 py-4">Deskripsi Aktivitas</th>
|
|
<th class="px-6 py-4 text-right">Teknis</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-100 font-medium text-slate-700">
|
|
@forelse($logs as $log)
|
|
<tr class="hover:bg-slate-50/50 transition-all group">
|
|
<td class="px-6 py-4">
|
|
<p class="text-xs font-black text-slate-800">{{ $log->created_at->format('d/m/Y') }}</p>
|
|
<p class="text-[10px] text-slate-400 font-bold tracking-tight">{{ $log->created_at->format('H:i:s') }}</p>
|
|
</td>
|
|
|
|
{{-- Inisial: Font Gelap (text-slate-900) di Box Putih --}}
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl bg-white border border-slate-200 text-slate-900 flex items-center justify-center font-black text-sm shadow-sm uppercase">
|
|
{{ substr($log->user->name ?? 'S', 0, 1) }}
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-black text-slate-700">{{ $log->user->name ?? 'Sistem' }}</p>
|
|
<p class="text-[9px] text-slate-400 font-bold uppercase tracking-widest">{{ $log->user->role ?? '-' }}</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center">
|
|
@php
|
|
$action = strtoupper($log->action);
|
|
$style = 'text-slate-500 bg-slate-50 border-slate-100';
|
|
if(str_contains($action, 'CREATE')) $style = 'text-emerald-600 bg-emerald-50 border-emerald-100';
|
|
if(str_contains($action, 'UPDATE')) $style = 'text-blue-600 bg-blue-50 border-blue-100';
|
|
if(str_contains($action, 'DELETE')) $style = 'text-rose-600 bg-rose-50 border-rose-100';
|
|
if(str_contains($action, 'LOGIN')) $style = 'text-amber-600 bg-amber-50 border-amber-100';
|
|
@endphp
|
|
<span class="px-3 py-1 rounded-lg text-[9px] font-black border uppercase {{ $style }}">
|
|
{{ $log->action }}
|
|
</span>
|
|
</td>
|
|
|
|
<td class="px-6 py-4">
|
|
<div class="flex flex-col">
|
|
<span class="text-xs font-bold text-slate-600 leading-relaxed">{{ $log->description }}</span>
|
|
<span class="text-[9px] text-slate-400 italic">Target: {{ class_basename($log->model) }} (ID: {{ $log->model_id }})</span>
|
|
</div>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-right">
|
|
<span class="text-[10px] font-mono font-bold text-slate-500 bg-slate-50 px-2 py-0.5 rounded border border-slate-100">
|
|
{{ $log->ip_address }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="5" class="px-6 py-20 text-center text-slate-400 uppercase text-[10px] font-black tracking-widest">
|
|
Tidak ada log ditemukan
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="p-6 border-t border-slate-100 bg-slate-50/30">
|
|
{{ $logs->appends(request()->query())->links() }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Script SweetAlert (Tanpa perubahan layout) --}}
|
|
@push('scripts')
|
|
<script>
|
|
function confirmClearLogs() {
|
|
Swal.fire({
|
|
title: 'RESET DATA LOG?',
|
|
html: "Anda akan menghapus <b class='text-rose-600'>SEMUA</b> riwayat aktivitas. Data tidak bisa dikembalikan!",
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#e11d48',
|
|
confirmButtonText: 'YA, BERSIHKAN',
|
|
cancelButtonText: 'BATAL',
|
|
reverseButtons: true,
|
|
customClass: { popup: 'rounded-[2.5rem] p-10' }
|
|
}).then((result) => {
|
|
if (result.isConfirmed) document.getElementById('clear-logs-form').submit();
|
|
});
|
|
}
|
|
</script>
|
|
@endpush
|
|
</x-app-layout> |