import React, { useState } from 'react'; import { Head, router, usePage } from '@inertiajs/react'; import AdminLayout from '@/components/layouts/admin-layout'; import { HiSearch, HiFilter, HiRefresh, HiChevronLeft, HiChevronRight, HiClock, HiTerminal } from 'react-icons/hi'; import PopupDetailLog from '@/components/admin/logs/popupDetailLog'; interface User { id_user: string; username: string; } interface LogItem { id_log: number; id_user: string | null; user: User | null; action: string; description: string; ip_address: string | null; created_at: string; } interface PaginationProps { data: T[]; current_page: number; last_page: number; per_page: number; total: number; from: number; to: number; links: Array<{ url: string | null; label: string; active: boolean; }>; } interface PageProps { logs: PaginationProps; filters: { search?: string; action?: string; date_from?: string; date_to?: string; }; actionsList: string[]; } export default function LogsManagement() { const { logs, filters = {}, actionsList = [] } = usePage().props as PageProps; // Local state untuk filter const [search, setSearch] = useState(filters.search || ''); const [action, setAction] = useState(filters.action || ''); const [dateFrom, setDateFrom] = useState(filters.date_from || ''); const [dateTo, setDateTo] = useState(filters.date_to || ''); // Modal detail payload JSON const [selectedPayload, setSelectedPayload] = useState(null); const [selectedLog, setSelectedLog] = useState(null); // Trigger pencarian/filter ke Server const handleFilter = (e?: React.FormEvent) => { if (e) e.preventDefault(); router.get( '/admin/logs', { search, action, date_from: dateFrom, date_to: dateTo }, { preserveState: true, replace: true } ); }; // Reset semua filter const handleReset = () => { setSearch(''); setAction(''); setDateFrom(''); setDateTo(''); router.get('/admin/logs', {}, { preserveState: true, replace: true }); }; // Helper penentu badge warna action const getActionBadgeClass = (actionName: string) => { if (!actionName) return 'bg-gray-800 text-gray-300 border-gray-700'; const act = actionName.toUpperCase(); if (act.includes('LOGIN') || act.includes('CREATE')) return 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20'; if (act.includes('UPDATE') || act.includes('EDIT')) return 'bg-amber-500/10 text-amber-400 border-amber-500/20'; if (act.includes('DELETE') || act.includes('LOGOUT')) return 'bg-rose-500/10 text-rose-400 border-rose-500/20'; return 'bg-blue-500/10 text-blue-400 border-blue-500/20'; }; return (
{/* metadata */} Logs Admin {/* FILTER BAR CONTAINER */}

Filter Log Aktivitis

{/* Search Input */}
setSearch(e.target.value)} className="w-full pl-9 pr-4 py-2 bg-gray-950 border border-gray-800 rounded-xl text-xs text-gray-200 placeholder-gray-500 focus:border-gray-700 focus:outline-none transition" />
{/* Action Select */} {/* Date From */} setDateFrom(e.target.value)} className="w-full px-3 py-2 bg-gray-950 border border-gray-800 rounded-xl text-xs text-gray-300 focus:border-gray-700 focus:outline-none transition scheme-dark" /> {/* Date To */} setDateTo(e.target.value)} className="w-full px-3 py-2 bg-gray-950 border border-gray-800 rounded-xl text-xs text-gray-300 focus:border-gray-700 focus:outline-none transition scheme-dark" />
{/* Action Buttons */}

Menampilkan {logs.from || 0} - {logs.to || 0} dari {logs.total} log

{/* TABLE DATA LOGS */}
{logs?.data?.length > 0 ? ( logs.data.map((log) => ( setSelectedLog(log)} className="hover:bg-gray-800/40 cursor-pointer transition duration-150"> {/* Waktu Log */} {/* User */} {/* Action Badge */} {/* Deskripsi */} {/* IP Address */} )) ) : ( )}
Waktu Pengguna Action Deskripsi IP Address
{new Date(log.created_at).toLocaleString('id-ID', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', })}
{log.user ? (

{log.user.username}

) : ( Sistem / Terhapus )} 		{log.action || '-'} {log.description} {log.ip_address || '-'}
Tidak ada data log aktivitas yang ditemukan.
{/* PAGINATION */} {logs?.last_page > 1 && (

Halaman {logs.current_page} dari {logs.last_page}

{logs.links.map((link, idx) => { if (link.label.includes('«') || link.label.includes('Previous')) { return ( ); } if (link.label.includes('»') || link.label.includes('Next')) { return ( ); } return ( ); })}
)}
{/* MODAL VIEW PAYLOAD JSON */} {selectedPayload && (

Detail Payload Data 

              {JSON.stringify(selectedPayload, null, 2)}
)} {/* MODAL DETAIL LOG */} {selectedLog && ( setSelectedLog(null)} /> )}
); } // Attach Persistent Layout LogsManagement.layout = (page: React.ReactNode) => ( {page} );