// resources/js/Pages/Admin/Users/Edit.tsx import AuthenticatedLayout from '@/layouts/AuthenticatedLayout'; import { Head, Link, useForm, usePage } from '@inertiajs/react'; import { ArrowLeft, Shield } from 'lucide-react'; import { FormEventHandler } from 'react'; interface UserItem { id: number; name: string; email: string; role: string; } interface EditPageProps { auth: { user: { id: number; name: string; email: string } }; user: UserItem; targetRole: string; errors?: Record; flash?: { success?: string; error?: string }; [key: string]: unknown; } export default function Edit() { const { auth, user, errors, flash, targetRole } = usePage().props; if (!user) { return (

Pengguna Tidak Ditemukan

Kembali ke daftar
); } const { data, setData, put, processing, errors: formErrors, } = useForm({ name: user.name || '', email: user.email || '', password: '', password_confirmation: '', }); const allErrors = { ...errors, ...formErrors }; const submit: FormEventHandler = (e) => { e.preventDefault(); put(route('admin.users.update', user.id)); }; return (
{/* Header */}

Edit Admin Desa

Perbarui detail akun {user.name}

{/* Flash */} {flash?.success && (
{flash.success}
)} {flash?.error &&
{flash.error}
} {/* Role indicator */}

Role akun ini: Admin Desa. Role tidak dapat diubah.

{/* Form */}

Formulir Edit Pengguna

Kosongkan password jika tidak ingin mengubahnya

{/* Nama */}
setData('name', e.target.value)} required className={`block w-full rounded-lg border px-3 py-2.5 text-sm shadow-sm transition focus:ring-2 focus:outline-none ${allErrors.name ? 'border-red-300 focus:border-red-500 focus:ring-red-500/30' : 'border-gray-300 focus:border-orange-500 focus:ring-orange-500/30'}`} /> {allErrors.name &&

{allErrors.name}

}
{/* Email */}
setData('email', e.target.value)} required className={`block w-full rounded-lg border px-3 py-2.5 text-sm shadow-sm transition focus:ring-2 focus:outline-none ${allErrors.email ? 'border-red-300 focus:border-red-500 focus:ring-red-500/30' : 'border-gray-300 focus:border-orange-500 focus:ring-orange-500/30'}`} /> {allErrors.email &&

{allErrors.email}

}
{/* Password baru */}
setData('password', e.target.value)} placeholder="Kosongkan jika tidak diganti" className={`block w-full rounded-lg border px-3 py-2.5 text-sm shadow-sm transition focus:ring-2 focus:outline-none ${allErrors.password ? 'border-red-300 focus:border-red-500 focus:ring-red-500/30' : 'border-gray-300 focus:border-orange-500 focus:ring-orange-500/30'}`} /> {allErrors.password &&

{allErrors.password}

}
{/* Konfirmasi */}
setData('password_confirmation', e.target.value)} placeholder="Ulangi password baru" className={`block w-full rounded-lg border px-3 py-2.5 text-sm shadow-sm transition focus:ring-2 focus:outline-none ${allErrors.password_confirmation ? 'border-red-300 focus:border-red-500 focus:ring-red-500/30' : 'border-gray-300 focus:border-orange-500 focus:ring-orange-500/30'}`} /> {allErrors.password_confirmation && (

{allErrors.password_confirmation}

)}
{/* Actions */}
Batal
); }