112 lines
4.2 KiB
TypeScript
112 lines
4.2 KiB
TypeScript
'use client'
|
|
|
|
import { useActionState, useEffect, useState } from 'react'
|
|
import { updatePetugas } from '@/app/actions'
|
|
import { User, Phone, Lock, UserCog, CheckCircle, XCircle, X } from 'lucide-react'
|
|
|
|
interface PetugasData {
|
|
id: string
|
|
nama: string
|
|
username: string
|
|
no_telp: string | null
|
|
password: string
|
|
}
|
|
|
|
interface Props {
|
|
petugas: PetugasData
|
|
}
|
|
|
|
import { showSwal } from '@/lib/swal'
|
|
|
|
export function EditPetugasForm({ petugas }: Props) {
|
|
const [state, formAction, isPending] = useActionState(updatePetugas, null)
|
|
|
|
useEffect(() => {
|
|
if (state) {
|
|
if (state.success) {
|
|
showSwal.success('Berhasil!', state.message)
|
|
} else {
|
|
showSwal.error('Gagal!', state.message)
|
|
}
|
|
}
|
|
}, [state])
|
|
|
|
return (
|
|
<>
|
|
<form action={formAction} className="flex flex-col gap-6">
|
|
<input type="hidden" name="id" value={petugas.id} />
|
|
|
|
{/* Nama */}
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-sm font-bold flex items-center gap-2">
|
|
<User className="w-4 h-4" />
|
|
Nama Lengkap
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="nama"
|
|
defaultValue={petugas.nama}
|
|
className="border-2 border-gray-200 rounded-lg p-3 focus:outline-none focus:border-black transition-colors"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
{/* Username */}
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-sm font-bold flex items-center gap-2">
|
|
<UserCog className="w-4 h-4" />
|
|
Username
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="username"
|
|
defaultValue={petugas.username}
|
|
className="border-2 border-gray-200 rounded-lg p-3 focus:outline-none focus:border-black transition-colors"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
{/* No Telp */}
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-sm font-bold flex items-center gap-2">
|
|
<Phone className="w-4 h-4" />
|
|
Nomor Telepon
|
|
</label>
|
|
<input
|
|
type="tel"
|
|
name="no_telp"
|
|
defaultValue={petugas.no_telp || ''}
|
|
className="border-2 border-gray-200 rounded-lg p-3 focus:outline-none focus:border-black transition-colors"
|
|
/>
|
|
</div>
|
|
|
|
{/* Password */}
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-sm font-bold flex items-center gap-2">
|
|
<Lock className="w-4 h-4" />
|
|
Password
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="password"
|
|
defaultValue={petugas.password}
|
|
className="border-2 border-gray-200 rounded-lg p-3 focus:outline-none focus:border-black transition-colors"
|
|
required
|
|
/>
|
|
<p className="text-[10px] text-gray-400">Pastikan password anda aman dan mudah diingat.</p>
|
|
</div>
|
|
|
|
<div className="pt-4">
|
|
<button
|
|
type="submit"
|
|
disabled={isPending}
|
|
className="w-full bg-black text-white font-bold py-4 rounded-lg hover:bg-gray-800 transition-all shadow-[4px_4px_0px_0px_rgba(0,0,0,0.2)] hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,0.2)] hover:translate-x-[2px] hover:translate-y-[2px] disabled:opacity-60 disabled:cursor-not-allowed disabled:transform-none"
|
|
>
|
|
{isPending ? 'Menyimpan...' : 'Simpan Perubahan'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</>
|
|
)
|
|
}
|