import React, { useState, useMemo } from 'react'; import { Head, useForm, usePage, router } from '@inertiajs/react'; import { Search, Plus, Bell, UserPlus, Activity, ShieldCheck, User, ChevronDown, Users, Mail, Shield, Trash2, } from 'lucide-react'; interface Log { id: number; description: string; created_at: string; user?: { name: string; }; } interface UserType { id: number; name: string; email: string; role: string; created_at: string; } interface Props { logs: Log[]; users: UserType[]; } export default function ManageUsers({ logs, users = [] }: Props) { const { props } = usePage(); const auth = props.auth as any; const { data, setData, post, processing, errors, reset } = useForm({ name: '', email: '', password: '', role: 'user', }); const [logSearch, setLogSearch] = useState(''); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); post('/admin/users', { onSuccess: () => reset('name', 'email', 'password'), }); }; const handleDeleteUser = (id: number) => { if (confirm('Apakah Anda yakin ingin menghapus user ini?')) { router.delete(`/admin/users/${id}`); } }; const filteredLogs = useMemo(() => { if (!logSearch) return logs; const term = logSearch.toLowerCase(); return logs.filter( (log) => log.description.toLowerCase().includes(term) || log.user?.name?.toLowerCase().includes(term), ); }, [logs, logSearch]); return ( <>
{/* HEADER SEARCH BAR (Mirip halaman kontrak) */}
setLogSearch(e.target.value) } className="w-full rounded-xl border border-slate-800 bg-slate-950/40 py-2 pr-4 pl-9 text-sm text-slate-200 placeholder-slate-500 transition-colors focus:border-blue-500/80 focus:bg-slate-950/80 focus:ring-1 focus:ring-blue-500/30 focus:outline-none" />
{auth?.user?.name ? auth.user.name[0].toUpperCase() : 'A'}
{/* MAIN CONTENT AREA */}

Manage Users

Manage system access levels and review audit trails in real-time.

{/* TWO COLUMN GRID LAYOUT */}
{/* Kiri: Form Create User */}

Create New User

setData('name', e.target.value) } className="w-full rounded-xl border border-slate-800 bg-slate-950/40 px-4 py-2.5 text-sm text-slate-200 placeholder-slate-600 focus:border-blue-500/80 focus:bg-slate-950/80 focus:outline-none" placeholder="John Doe" /> {errors.name && (

{errors.name}

)}
setData('email', e.target.value) } className="w-full rounded-xl border border-slate-800 bg-slate-950/40 px-4 py-2.5 text-sm text-slate-200 placeholder-slate-600 focus:border-blue-500/80 focus:bg-slate-950/80 focus:outline-none" placeholder="demo@example.com" /> {errors.email && (

{errors.email}

)}
setData('password', e.target.value) } className="w-full rounded-xl border border-slate-800 bg-slate-950/40 px-4 py-2.5 text-sm text-slate-200 placeholder-slate-600 focus:border-blue-500/80 focus:bg-slate-950/80 focus:outline-none" placeholder="••••••••" /> {errors.password && (

{errors.password}

)}
{/* Kanan: System Activity Logs & Registered Users */}
{/* Logs Box */}

System Activity Logs

Showing {filteredLogs.length} logs
{filteredLogs.length === 0 ? (

No activity logs found.

) : ( filteredLogs.map((log) => (
{log.description .toLowerCase() .includes('admin') ? ( ) : ( )}

{log.user?.name || 'System'} {' '} {log.description}

{new Date( log.created_at, ).toLocaleString( 'id-ID', { dateStyle: 'medium', timeStyle: 'short', }, )}

)) )}
{/* Registered Users Table Box */}

Registered Users

List of all accounts currently granted database access.

{users.length === 0 ? ( ) : ( users.map((u) => ( )) )}
User Email Role Registered Date Actions
No registered users found.
{u.name ? u.name[0].toUpperCase() : 'U'}
{u.name} 		{u.email} {u.role === 'admin' ? ( {' '} Admin ) : ( {' '} User )} {new Date( u.created_at, ).toLocaleDateString( 'id-ID', { dateStyle: 'medium', }, )} {auth?.user?.id !== u.id && ( )}
); }