arifal
305 lines
9.1 KiB
TypeScript
305 lines
9.1 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import { useRouter } from "next/navigation";
|
||
import { submitVerificationAction } from "@/features/organizer/actions";
|
||
|
||
type Initial = {
|
||
fullName: string;
|
||
nik: string;
|
||
birthDate: Date;
|
||
address: string;
|
||
ktpImageKey: string;
|
||
selfieKey: string;
|
||
bankName: string;
|
||
bankAccountNumber: string;
|
||
bankAccountName: string;
|
||
} | null;
|
||
|
||
type UploadKind = "ktp" | "selfie";
|
||
|
||
const ACCEPT_MIME = "image/jpeg,image/png,image/webp";
|
||
const MAX_BYTES = 5 * 1024 * 1024;
|
||
|
||
function toYmd(d: Date): string {
|
||
const y = d.getUTCFullYear();
|
||
const m = String(d.getUTCMonth() + 1).padStart(2, "0");
|
||
const day = String(d.getUTCDate()).padStart(2, "0");
|
||
return `${y}-${m}-${day}`;
|
||
}
|
||
|
||
export function VerifyForm({ initial }: { initial: Initial }) {
|
||
const router = useRouter();
|
||
const [error, setError] = useState("");
|
||
const [loading, setLoading] = useState(false);
|
||
const [ktpKey, setKtpKey] = useState(initial?.ktpImageKey ?? "");
|
||
const [selfieKey, setSelfieKey] = useState(initial?.selfieKey ?? "");
|
||
|
||
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||
e.preventDefault();
|
||
setError("");
|
||
if (!ktpKey || !selfieKey) {
|
||
setError("Foto KTP dan selfie wajib diunggah");
|
||
return;
|
||
}
|
||
setLoading(true);
|
||
const formData = new FormData(e.currentTarget);
|
||
formData.set("ktpImageKey", ktpKey);
|
||
formData.set("selfieKey", selfieKey);
|
||
const result = await submitVerificationAction(formData);
|
||
setLoading(false);
|
||
if (result.error) {
|
||
setError(result.error);
|
||
return;
|
||
}
|
||
router.refresh();
|
||
}
|
||
|
||
const inputCls =
|
||
"w-full rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-2.5 text-sm text-neutral-800 transition-colors placeholder:text-neutral-400 focus:bg-white";
|
||
|
||
return (
|
||
<form
|
||
onSubmit={handleSubmit}
|
||
className="space-y-5 rounded-2xl border border-neutral-200 bg-white p-6 shadow-sm sm:p-8"
|
||
>
|
||
{error && (
|
||
<div className="rounded-xl bg-red-50 px-4 py-3 text-sm font-medium text-red-600">
|
||
{error}
|
||
</div>
|
||
)}
|
||
|
||
<section>
|
||
<h2 className="mb-3 text-base font-bold text-neutral-900">📇 Data KTP</h2>
|
||
<div className="grid gap-4 sm:grid-cols-2">
|
||
<div className="sm:col-span-2">
|
||
<label className="mb-1.5 block text-sm font-semibold text-neutral-700">
|
||
Nama Lengkap (sesuai KTP)
|
||
</label>
|
||
<input
|
||
name="fullName"
|
||
type="text"
|
||
required
|
||
defaultValue={initial?.fullName ?? ""}
|
||
className={inputCls}
|
||
placeholder="Mis. Budi Santoso"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="mb-1.5 block text-sm font-semibold text-neutral-700">
|
||
NIK (16 digit)
|
||
</label>
|
||
<input
|
||
name="nik"
|
||
type="text"
|
||
inputMode="numeric"
|
||
pattern="\d{16}"
|
||
maxLength={16}
|
||
required
|
||
defaultValue={initial?.nik ?? ""}
|
||
className={inputCls}
|
||
placeholder="3201xxxxxxxxxxxx"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="mb-1.5 block text-sm font-semibold text-neutral-700">
|
||
Tanggal Lahir
|
||
</label>
|
||
<input
|
||
name="birthDate"
|
||
type="date"
|
||
required
|
||
defaultValue={initial ? toYmd(new Date(initial.birthDate)) : ""}
|
||
className={inputCls}
|
||
/>
|
||
</div>
|
||
<div className="sm:col-span-2">
|
||
<label className="mb-1.5 block text-sm font-semibold text-neutral-700">
|
||
Alamat (sesuai KTP)
|
||
</label>
|
||
<textarea
|
||
name="address"
|
||
required
|
||
rows={3}
|
||
defaultValue={initial?.address ?? ""}
|
||
className={inputCls}
|
||
placeholder="Jalan, RT/RW, kelurahan, kota, provinsi"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2 className="mb-3 text-base font-bold text-neutral-900">🖼️ Foto</h2>
|
||
<p className="mb-3 text-xs text-neutral-500">
|
||
Foto disimpan terenkripsi di server SeTrip dan hanya bisa dilihat oleh
|
||
tim admin saat review. Maks 5MB, JPG/PNG/WebP.
|
||
</p>
|
||
<div className="space-y-4">
|
||
<FileUpload
|
||
label="Foto KTP"
|
||
kind="ktp"
|
||
value={ktpKey}
|
||
onChange={setKtpKey}
|
||
onError={setError}
|
||
/>
|
||
<FileUpload
|
||
label="Selfie dengan KTP"
|
||
kind="selfie"
|
||
value={selfieKey}
|
||
onChange={setSelfieKey}
|
||
onError={setError}
|
||
/>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2 className="mb-3 text-base font-bold text-neutral-900">🏦 Rekening Bank</h2>
|
||
<div className="grid gap-4 sm:grid-cols-2">
|
||
<div>
|
||
<label className="mb-1.5 block text-sm font-semibold text-neutral-700">
|
||
Nama Bank
|
||
</label>
|
||
<input
|
||
name="bankName"
|
||
type="text"
|
||
required
|
||
defaultValue={initial?.bankName ?? ""}
|
||
className={inputCls}
|
||
placeholder="Mis. BCA, Mandiri, BRI"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="mb-1.5 block text-sm font-semibold text-neutral-700">
|
||
Nomor Rekening
|
||
</label>
|
||
<input
|
||
name="bankAccountNumber"
|
||
type="text"
|
||
inputMode="numeric"
|
||
required
|
||
defaultValue={initial?.bankAccountNumber ?? ""}
|
||
className={inputCls}
|
||
placeholder="1234567890"
|
||
/>
|
||
</div>
|
||
<div className="sm:col-span-2">
|
||
<label className="mb-1.5 block text-sm font-semibold text-neutral-700">
|
||
Nama Pemilik Rekening
|
||
</label>
|
||
<input
|
||
name="bankAccountName"
|
||
type="text"
|
||
required
|
||
defaultValue={initial?.bankAccountName ?? ""}
|
||
className={inputCls}
|
||
placeholder="Sesuai buku tabungan"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<button
|
||
type="submit"
|
||
disabled={loading}
|
||
className="w-full rounded-xl bg-primary-600 py-2.5 text-sm font-bold text-white shadow-lg shadow-primary-600/20 transition-colors hover:bg-primary-700 disabled:opacity-50"
|
||
>
|
||
{loading ? "Mengirim..." : "Ajukan Verifikasi"}
|
||
</button>
|
||
|
||
<p className="text-center text-xs text-neutral-500">
|
||
Data KTP & rekening hanya digunakan untuk verifikasi dan tidak akan
|
||
ditampilkan ke pengguna lain.
|
||
</p>
|
||
</form>
|
||
);
|
||
}
|
||
|
||
function FileUpload({
|
||
label,
|
||
kind,
|
||
value,
|
||
onChange,
|
||
onError,
|
||
}: {
|
||
label: string;
|
||
kind: UploadKind;
|
||
value: string;
|
||
onChange: (key: string) => void;
|
||
onError: (msg: string) => void;
|
||
}) {
|
||
const [busy, setBusy] = useState(false);
|
||
const [previewUrl, setPreviewUrl] = useState<string>("");
|
||
|
||
async function onPick(e: React.ChangeEvent<HTMLInputElement>) {
|
||
const file = e.target.files?.[0];
|
||
if (!file) return;
|
||
if (file.size > MAX_BYTES) {
|
||
onError(`${label} maksimal 5MB`);
|
||
e.target.value = "";
|
||
return;
|
||
}
|
||
if (!ACCEPT_MIME.split(",").includes(file.type)) {
|
||
onError(`${label} harus JPG, PNG, atau WebP`);
|
||
e.target.value = "";
|
||
return;
|
||
}
|
||
|
||
setBusy(true);
|
||
onError("");
|
||
try {
|
||
const fd = new FormData();
|
||
fd.set("kind", kind);
|
||
fd.set("file", file);
|
||
const res = await fetch("/api/upload/kyc", { method: "POST", body: fd });
|
||
const json = await res.json();
|
||
if (!res.ok) {
|
||
onError(json.error ?? `Gagal mengunggah ${label}`);
|
||
return;
|
||
}
|
||
onChange(json.key);
|
||
const obj = URL.createObjectURL(file);
|
||
setPreviewUrl((old) => {
|
||
if (old) URL.revokeObjectURL(old);
|
||
return obj;
|
||
});
|
||
} catch {
|
||
onError(`Gagal mengunggah ${label}`);
|
||
} finally {
|
||
setBusy(false);
|
||
e.target.value = "";
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div>
|
||
<label className="mb-1.5 block text-sm font-semibold text-neutral-700">
|
||
{label}
|
||
</label>
|
||
<div className="flex items-center gap-3">
|
||
<label className="inline-flex cursor-pointer items-center rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-100">
|
||
{busy ? "Mengunggah..." : value ? "Ganti file" : "Pilih file"}
|
||
<input
|
||
type="file"
|
||
accept={ACCEPT_MIME}
|
||
onChange={onPick}
|
||
disabled={busy}
|
||
className="sr-only"
|
||
/>
|
||
</label>
|
||
{value && !busy && (
|
||
<span className="text-xs text-neutral-500">✓ Terunggah</span>
|
||
)}
|
||
</div>
|
||
{previewUrl && (
|
||
// eslint-disable-next-line @next/next/no-img-element
|
||
<img
|
||
src={previewUrl}
|
||
alt={`${label} preview`}
|
||
className="mt-2 max-h-40 rounded-lg border border-neutral-200"
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|